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>}
/>

See screenshot

Answer 1

您还必须实现 Snackbar 组件的 onClose 方法才能使超时生效。

假设 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 中不起作用

autoHideDuration is not working in Snackbar @material-ui

reactjs

snackbar

material-ui