Question

我有一个Snackbar组件，通过检查redux状态来控制。 onRequestClose()是尝试禁用Clickaway close功能。我遇到的问题是，当道具snackbarWarningOpen第一次设置为false时，小吃店不会解散。

这是我的代码以及我如何调用Snackbar组件。 snackbarWarningOpen是一个布尔变量，它以prop形式出现，并且可以正确地从true切换为false。

<Snackbar
      open={snackbarWarningOpen}
      message={
        <span>
          <i className="fa fa-exclamation-triangle ble-warning" aria-hidden="true" />
          <span> {snackbarWarningMessage}</span>
        </span>
      }
      style={styles.warningSnackbar}
      bodyStyle={styles.warningSnackbarBody}
      onRequestClose={(reason) => {
        if (reason === 'clickaway') {
          return;
        }
      }}
    />

我将问题追溯到setTimeout()中的componentWillReceiveProps函数，它始终将打开状态设置为true上次运行，即使我传递的道具是false。奇怪的是，IF语句的条件返回false，但setTimeout()函数仍然运行。在道具被设置为假之后，一个点击事件将关闭快餐栏，但我试图让它自己解雇。我的实现是否不正确，或者这是snackbar组件中的错误？

这是来自Material-UI源代码的代码，而setState中的timerOneAtTheTimeId是在我将组件作为false传递给open open后将open切换回true的位置。

componentWillReceiveProps(nextProps) {
if (this.props.open && nextProps.open &&
    (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) {
  this.setState({
    open: false,
  });

  clearTimeout(this.timerOneAtTheTimeId);
  this.timerOneAtTheTimeId = setTimeout(() => {
    this.setState({
      message: nextProps.message,
      action: nextProps.action,
      open: true,
    });
  }, 400);
} else {
  const open = nextProps.open;

  this.setState({
    open: open !== null ? open : this.state.open,
    message: nextProps.message,
    action: nextProps.action,
  });
}

Answer 1

此问题已超过一年，并且未指定Material UI的版本，但无论谁遇到问题：现在可以在Material UI的v1.x版本中轻松解决：

scnackBar组件有一个autoHideDuration道具可以设置为实现您的需要：

<Snackbar
    open={this.state.open}
    onClose={this.handleClose}
    autoHideDuration={6000}
/>

＆＃34>关于点击的解雇＆＃34;但是仍然会很活跃。

请务必查看the snackbar documentation以获取最新信息。

在受控状态设置为false后，Material-UI Snackbar不会被忽略

1 个答案: