javascript - 在ReactJS中如何仅在登录成功时启用mui Snackbar？

Question

在ReactJS中，我想仅在登录成功时显示material-ui Snackbar。在ReactJS中有哪些方法可以做到这一点？

Answer 1

Material-ui Snackbar 的 open 状态采用 true 或 false 状态，因此在登录成功时相对容易显示它。

考虑到您正在使用 Redux 来存储登录状态

你可以这样做

<Snackbar
      open={this.props.loggedIn}
      message="Event added to your calendar"
      autoHideDuration={4000}
      onRequestClose={this.handleRequestClose}
    />

如果您不使用 Redux 并将登录状态存储在 cookie 中，

您可以将其加载到某个状态

componentDidMount() {
    var loggedIn = cookie.load('isLoggedIn');
    this.setState({loggedIn});
}

<Snackbar
      open={this.state.loggedIn}
      message="Event added to your calendar"
      autoHideDuration={4000}
      onRequestClose={this.handleRequestClose}
    />