我希望只有当组件未更新时,小吃栏才会在 2 秒内超时。如果它更新了,我希望计时器在还没有达到 2 秒时重置。
useEffect(() => {
setOpen(true)
},[props.single_message])
return(
<div>
{props.single_message.length !== 0
?
<Snackbar open={open} autoHideDuration={2000}
onClose={() => setOpen(false)}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }} >
<SnackbarContent aria-describedby="message-id2"
className={classes.snackbarStyleViaNestedContent}
message={props.single_message[0]}
action={action}
/>
</Snackbar>
:
null
}
</div>
)
如果 autoHideDuration 尚未完成,如何在组件更新时重置 autoHideDuration。如果 autoHideDuration 无法实现,还有其他方法吗?
我认为最好的方法是这样的:
var timeout;
const [open, setOpen] = useState(false);
<Button
onClick={() => {
setOpen(true);
clearTimeout(timeout);
timeout = setTimeout(function () {
setOpen(false);
}, 2000);
}}
/>
<Snackbar
open={open}
onClose={() => setOpen(false)}
message="Test snackbar"
/>
然而,也许这样的东西(使用当前时间)可以工作:
const [closeTime, setCloseTime] = useState(0);
<Button onClick={() => setCloseTime(Date.now() + 2000)} />
<Snackbar
open={closeTime > Date.now()}
onClose={() => setCloseTime(0)}
message="Test snackbar"
/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)