onClick事件永远不会在React Child中触发

Question

我有一个React-Redux应用程序，在单击组件时启动功能时遇到问题。单击注销按钮时，它将触发onClick={this.handleLogout}。但是，Redux开发人员工具和在handleLogout中添加控制台日志证明了该功能永远不会执行。

这里是两个组件，一个标准的导航栏和一个自定义按钮组件。我省略了一些导入以缩短代码。

导航栏

class Navigation extends React.Component {
  handleLogout = () => {
    this.props.logOut();
    this.props.history.push("/login");
  }

  render() {
    return (
      <nav>
        <span className="nav-left">
          <Link className="light" to="/">
            Home
          </Link>
        </span>
        <span className="nav-right">
          {this.props.authenticated ? (
            <>
              <Button to="/account">Account</Button>
              <Button onClick={this.handleLogout} buttonStyle="danger">
                Log Out
              </Button>
            </>
          ) : (
            <Button to="/login">Login</Button>
          )}
        </span>
      </nav>
    );
  }
}

Navigation.propTypes = {
  authenticated: PropTypes.bool.isRequired,
  logOut: PropTypes.func.isRequired
};

export default withRouter(Navigation);

按钮

export default class Button extends Component {
  state = {
    classList: classNames({
      button: true,
      button_accent: this.props.buttonStyle === "accent",
      button_danger: this.props.buttonStyle === "danger"
    })
  };

  render() {
    return (
      <div className="button_container">
        <div
          className={classNames({
            button_wrapper: true,
            center: !this.props.left && !this.props.right,
            left: this.props.left,
            right: this.props.right
          })}
        >
          {
            this.props.to ? (
              this.props.regular ? (
                <a href={this.props.to} className={this.state.classList}>
                  {this.props.children}
                </a>
              ) : (
                <Link to={this.props.to} className={this.state.classList}>
                  {this.props.children}
                </Link>
              )
            ) : (
              <span className={this.state.classList}>
                {this.props.children}
              </span>              
            )
          }
        </div>
      </div>
    );
  }
}

Component Dev Toolscomponent dev tools

Answer 1

您忘记了将onClick传递给表示没有链接的按钮的范围

export default class Button extends Component {
  state = {
    classList: classNames({
      button: true,
      button_accent: this.props.buttonStyle === "accent",
      button_danger: this.props.buttonStyle === "danger"
    })
  };

  render() {
    return (
      <div className="button_container">
        <div
          className={classNames({
            button_wrapper: true,
            center: !this.props.left && !this.props.right,
            left: this.props.left,
            right: this.props.right
          })}
        >
          {
            this.props.to ? (
              this.props.regular ? (
                <a href={this.props.to} className={this.state.classList}>
                  {this.props.children}
                </a>
              ) : (
                <Link to={this.props.to} className={this.state.classList}>
                  {this.props.children}
                </Link>
              )
            ) : (
              <span onClick={this.props.onClick} className={this.state.classList}>
                {this.props.children}
              </span>              
            )
          }
        </div>
      </div>
    );
  }
}