javascript - Material-UI Snackbar does not dismiss after controlled state set to false - Stack Overflow

admin管理员组

文章数量:1391989

I have a Snackbar ponent that is controlled by checking the redux state. The onRequestClose() is an attempt to disable the clickaway close function. The problem I am having is that when the prop snackbarWarningOpen is set to false the first time, the snackbar does not dismiss.

Here is my code and how I am calling the Snackbar ponent. The snackbarWarningOpen is a boolean variable that es in as a prop, and that is accurately switching from true to false appropriately.

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

I tracked down the problem to the setTimeout() function in ponentWillReceiveProps, and it always sets the open state to true the last time it runs, even when the prop I am passing is false. The weird part is that the condition on the IF statement returns false, but the setTimeout() function still runs. After the prop is set to false, a clickaway event will dismiss the snackbar, but I am trying to get it to dismiss on its own. Is my implementation incorrect, or is this a bug in the snackbar ponent?

This is code from the Material-UI source, and the setState within timerOneAtTheTimeId is where open switches back to true after I have passed the ponent an open prop as false.

ponentWillReceiveProps(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,
  });
}

I have a Snackbar ponent that is controlled by checking the redux state. The onRequestClose() is an attempt to disable the clickaway close function. The problem I am having is that when the prop snackbarWarningOpen is set to false the first time, the snackbar does not dismiss.

Here is my code and how I am calling the Snackbar ponent. The snackbarWarningOpen is a boolean variable that es in as a prop, and that is accurately switching from true to false appropriately.

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

I tracked down the problem to the setTimeout() function in ponentWillReceiveProps, and it always sets the open state to true the last time it runs, even when the prop I am passing is false. The weird part is that the condition on the IF statement returns false, but the setTimeout() function still runs. After the prop is set to false, a clickaway event will dismiss the snackbar, but I am trying to get it to dismiss on its own. Is my implementation incorrect, or is this a bug in the snackbar ponent?

This is code from the Material-UI source, and the setState within timerOneAtTheTimeId is where open switches back to true after I have passed the ponent an open prop as false.

ponentWillReceiveProps(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,
  });
}

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jan 31, 2017 at 23:34 Bonitis asked Jan 30, 2017 at 1:47 BonitisBonitis 15311 gold badge33 silver badges99 bronze badges 2

• I am a little bit confused by the code you pasted. open={snackbarWarningOpen}, but you set open in your state. I understand that those two code snippets e from the same ponent, right? Also, I am not sure why you are not using autoHideDuration Snackbar prop, where you can set the timeout? – szymonm Commented Jan 31, 2017 at 7:11
• Ah, good point that I need to clarify. The bottom code snippet is from the Material-UI source, not my code. I added it because it seems like that is where my problem is ing from, but I'm not sure. I'll edit with clarifications. – Bonitis Commented Jan 31, 2017 at 23:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This issue is over a year old, and the version of Material UI is not specified, but whoever es across the question: it can now be solved easily in version v1.x of Material UI:

The scnackBar ponent has an autoHideDuration prop that can be set to achieve what you need:

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

The "dismiss on clickaway" will still be active, though.

Make sure to check out the snackbar documentation for updated info.

本文标签： javascriptMaterialUI Snackbar does not dismiss after controlled state set to falseStack Overflow