汉堡菜单切换状态没有在ReactJ中切换

Question

我正在尝试在ReactJ中的汉堡菜单上修复移动视图上的错误。当前，单击时菜单会打开，但是当用户在不同页面(组件(之间切换时，菜单保持打开状态。

我为菜单项设置了一个onclick事件，以运行一个应更改组件状态以隐藏纳维尔的函数，但不会更改状态。

这是我的组件：

class Navigation extends React.Component{
  constructor(props){
    super(props);
    this.token = this.props.token;
    this.state = {
      isToggle: true,
    };
    let memberFunctions = Object.getOwnPropertyNames(Navigation.prototype);
    for (let functionName of memberFunctions) {
      if (functionName.startsWith('handle')) {
        this[functionName] = this[functionName].bind(this);
      }
    }
  }
handleResetHamburger() {
    console.log('reset burgers');
    console.log('before state', this.state);
    this.setState({
      isToggle : true,
    });
    console.log('after state', this.state);
  }

这是一个选择(我编辑了不相关的零件。如果这无用。

render(){    

    return (
      <section className="navigation schoger-border is-transparent">
        <nav className="navbar is-white">

          <div className="navbar-menu" id='navbar-menu-id'>
            <div className="navbar-start"></div>
            <div className="navbar-end" id="Options">
              <Link to="/" className="navbar-item has-text-centered" onClick= {this.handleResetHamburger}>Home</Link>
              {handleLoginVsLogout}
              <Link to="/about" className="navbar-item has-text-centered" onClick={this.handleResetHamburger}>About Us</Link>
            </div>
          </div>
          <div className="navbar-item"></div>
        </nav>
      </section>);
  }
}

我尝试了各种不同的语法，包括reactjs文档为处理事件列出的内容。

这是GitHub上完整文件的链接。

感谢您的帮助！长时间潜伏，第二次发问在这里。

Answer 1

这是一个简单的切换方法：

toggleMenu(){
    this.setState({isToggle: !this.state.isToggle});
}

另外，我还将在渲染方法中添加一个变量，以保存切换状态的className：

render(){
    let menuClassName = this.state.isToggle ? "toggle-open" : "toggle-closed";
    ...
    <div className=`nav-menu ${menuClass}`>
    ...
    </div>
}

如果您只想隐藏链接上的菜单，请单击将ISTOGGLE状态设置为false。