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

Posted 2023-02-23

【中文标题】autoHideDuration 在 Snackbar @material-ui 中不起作用

【英文标题】：autoHideDuration is not working in Snackbar @material-ui

【发布时间】：2019-08-09 19:40:26

【问题描述】：

我使用 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

【参考方案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)
/>

【参考方案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>

【讨论】：

autoHide 不会改变状态，所以这实际上给我造成了错误。