Question

我正在学习React。我有一个使用 JWT ，护照和 Redux 的身份验证程序。我正在使用带有徽标，注册按钮和登录按钮的引导程序制作导航栏。我不理解当用户成功登录时使用注销文本更改登录文本按钮，而在成功注销时使用反之亦然 。这是我在 Dashboard.js 中的代码：

class Dashboard extends Component {
  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser();
  };

  render() {
    const { user } = this.props.auth;

    return (
      <div style={{ height: "75vh" }} className="container valign-wrapper">
        <div style={{ marginTop: "4rem" }} className="row">
          <div className="landing-copy col s12 center-align">
            <h4>
              <b>Hey there,</b> {user.name}
              <br />
              <br />
              <p className="flow-text grey-text text-darken-1">
                You are logged in!
              </p>
            </h4>
            <button
              style={{
                width: "150px",
                borderRadius: "3px",
                letterSpacing: "1.5px",
                marginTop: "1rem"
              }}
              onClick={this.onLogoutClick}
              className="btn btn-danger"
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Dashboard.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(mapStateToProps, { logoutUser })(Dashboard);

以及 Navbar.js 代码：

class Navbar extends Component {
  render() {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <Link
          to="/"
          style={{
            fontFamily: "monospace"
          }}
          className="navbar-brand"
        >
          REAVOTE
        </Link>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mr-auto"></ul>
          <div class="form-inline my-2 my-lg-0">
            <Link
              to="/register"
              style={{
                width: "140px",
                borderRadius: "3px",
                letterSpacing: "1.5px"
              }}
              className="btn btn-primary"
            >
              Register
            </Link>
            &ensp;
            <Link
              to="/login"
              style={{
                width: "140px",
                borderRadius: "3px",
                letterSpacing: "1.5px"
              }}
              className="btn btn-danger"
            >
              Log In
            </Link>
          </div>
        </div>
      </nav>
    );
  }
}

export default Navbar;

Answer 1

因为您从reducer（mapStateToProps）带入身份验证状态；并将其添加到您的onClick属性中，以针对每种情况应用两个功能：

onClick = {
  this.props.auth.user ? (this.handleLogout) : (this.handleLogin)
}

onLoginClick = (e) => {
  e.preventDefault()
  this.props.logoutUser()
}

onLogoutClick = (e) => {
  e.preventDefault()
  this.props.loginUser()
}

为了直接阅读和复制/粘贴/共享等，最好直接共享代码，而不是jpg文件

如果要更改按钮文本，请在按钮文本区域中对auth进行相同的检查：

<button style= {{width: "150px", borderRadius: "3px", letterSpacing: "1.5px", marginTop: "1rem"}}
    onClick= {this.onLogoutClick}
    className="btn btn-danger" > {this.props.auth.user ? "Logout": "Login"}
</button>

将登录文本按钮更改为注销，反之亦然

1 个答案: