带 onClick 的按钮在 React 中只能工作一次

我需要在 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>

您的 onClick 工作正常，但它没有重新渲染您的反应组件。你需要把isOpened在组件和全局变量的状态中。请阅读this https://reactjs.org/docs/state-and-lifecycle.html

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