Событие onClick никогда не запускается в React Child - PullRequest
Новая
       9

Событие onClick никогда не запускается в React Child

0 голосов
/ 23 февраля 2020

У меня есть приложение React-Redux, и у меня возникают проблемы с запуском функции по щелчку компонента. При нажатии кнопки выхода из системы она должна вызвать onClick={this.handleLogout}. Однако инструменты Redux dev и добавление консольного журнала в 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>
    );
  }
}

Инструменты разработчика компонентов инструменты разработчика компонентов

1 Ответ

0 голосов
/ 23 февраля 2020

Вы забыли передать 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>
    );
  }
}
...