我使用 Material-ui 中的 Snackbar 来显示警报。我想在 5 秒后自动隐藏该 Snackbar 但autoHideDuration它不起作用。
<Snackbar
autoHideDuration={3000}
open={true}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id"> Message </span>}
/>autoHideDuration 在 Snackbar @material-ui 中不起作用
IT技术
reactjs
material-ui
snackbar
2021-05-04 05:21:04
2个回答
您还必须实现组件的onClose方法Snackbar才能使超时工作。
假设 的打开状态Snackbar处于您的组件状态：
<Snackbar
autoHideDuration={3000}
open={this.state.open}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id"> Message </span>}
onClose={() => this.setState({open: false})}
/>
如果您使用功能组件，您可以使用react-hooks并使其变得容易。
const [open, setOpen] = useState(false);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
<Snackbar autoHideDuration={6000} anchorOrigin={{ vertical: "top", horizontal: "right" }} open={open} onClose={handleClose}>
<Alert onClose={handleClose} severity="success>
"Data Successfully Submitted"
</Alert>
</Snackbar>