Question

我已使用Material-ui中的Snackbar显示警报。我想在5秒后自动隐藏该Snackbar，但是autoHideDuration无法正常工作。

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

See screenshot

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

如果你使用函数式组件，你可以使用 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>

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

2 个答案: