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

Question

I have a React-Redux application and I'm having issues launching a function on component click. When the logout button is clicked, it should trigger onClick={this.handleLogout} . However, Redux dev tools and adding a console log in the handleLogout prove that the function never executes.

Here are the two components, a standard navigation bar and a custom button component. I've left out some imports to shorten the code.

Navigation Bar

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);

Button

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 Tools component dev tools

Answer 1

You forgot to pass onClick to the span that represents a button without a link

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