autoHideDuration 在 Snackbar @material-ui 中不起作用

Question

我使用 Material-ui 中的 Snackbar 来显示警报。我想在 5 秒后自动隐藏该 Snackbar 但autoHideDuration它不起作用。

<Snackbar
  autoHideDuration={3000}
  open={true}
  ContentProps={{
    'aria-describedby': 'message-id',
  }}
  message={<span id="message-id"> Message </span>}
/>

看截图

Answer 1

您还必须实现组件的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})}
/>

Answer 2

如果您使用功能组件，您可以使用反应钩子并使其变得简单。

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>