Кнопка с onClick работает только один раз на react

200
11 мая 2019, 02:50

Я делаю сайт на реакте, хотел сделать раскрывающееся меня. Я сделал кнопку, которая при нажатии на нее должна менять bool переменную на противоположное значение, но кнопка работает только один раз, то есть меняет значение с false на true, а обратно нет (кнопка становиться неактивной, курсор не подсвечивает ее как ссылку, при нажатии нет никакого ответа, меню остается открытым). Код класса (урезан):

 class Header extends React.Component {
  constructor(props){
    super(props);
    this.state = {isOpened: false};
  }
  handleClick = () => {
    this.setState({isOpened: !this.state.isOpened});
  };
  render() {
    const path = history.location && history.location.pathname;
    return (
      <div className={s['header-left']}>
        <div className={s.logo}>
          <a href="/">
            <img
              width="160"
              height="85.75"
              src={logo}
              alt="Halm Personalberatung Köln"
            />
          </a>
        </div>
        <div className={s.button}>
          <a href="#" onClick={this.handleClick}>
            <FontAwesomeIcon icon={faBars} />
          </a>
        </div>

Код меню (в этом же классе):

<Collapse isOpened={this.state}>
        <nav className={`${s.menu} ${s.mobile}`}>
          ...
        </nav>
      </Collapse>
Answer 1

А если так?

<Collapse isOpened={this.state.isOpened}>
READ ALSO
Как исходный код на jQuery выглядит на JavaScript

Как исходный код на jQuery выглядит на JavaScript

У меня есть код на jQuery, но я хочу разобраться, как он работает и как выглядит на чистом JSМожете мне пожалуйста помочь, сконцентрировав его...

197
React синтаксис

React синтаксис

изучаю react, есть код

193
Ломается JS скрипт [закрыт]

Ломается JS скрипт [закрыт]

Есть JS скриптАнимация должна работать нормально

180
Смена роутинга для компонентов

Смена роутинга для компонентов

У меня есть три компонента:

224