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

Answer 2

如果你在反应中使用redux，它很简单 默认情况下，open属性为false，在LOG_IN_SUCCESS的reducer中应该为true，然后在成功登录后会显示小吃栏。