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

Question

Мне нужно создать свернутое меню в приложении React, но кнопка с onClick работает только один раз.Я создал логическую переменную, и она должна измениться, когда я нажму кнопку.Но я могу нажать кнопку только один раз, и после этого <a> не работает, он неактивен:

let isOpened = false;

class Header extends React.Component {
  handleClick = () => {
    isOpened = !isOpened;
  };

  render() {
    const path = history.location && history.location.pathname;
    return (
      <div className={s['header-left']}>
        <div className={s.button}>
          <a href="#"  onClick={this.handleClick}>
            <FontAwesomeIcon icon={faBars} />
          </a>
        </div>

И код свертки:

<Collapse isOpened={isOpened}>
        <nav className={`${s.menu} ${s.mobile}`}>
          <ul className={s['menu-ul']}>
            ...
          </ul>
        </nav>
      </Collapse>

Answer 1

Приложение к ответу @Ajay Gaur

Ваша проблема в использовании <a href="#" onClick={this.handleClick}> Когда вы пытаетесь нажать на ссылку, браузер хочет перенаправить вас на следующую страницу, потому что в a вы добавили href="#".Таким образом, есть два способа решения вашей проблемы.

1: используйте button вместо a тега.

2: добавьте предотвратительный дефолт в свой метод:

handleClick = (e) => {
  e.preventDefault();
  this.setState({ isOpened: !this.state.isOpened });
};

Это должно помочь.

Answer 2

Ваш onClick работает нормально, но он не рендерит ваш компонент реагирования.Вам необходимо указать isOpened в состоянии компонента и глобальной переменной.Пожалуйста, прочитайте это

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.button}>
          <a href="#"  onClick={this.handleClick}>
            <FontAwesomeIcon icon={faBars} />
          </a>
        </div>
   );
 }