汉堡菜单切换状态在 ReactJS 中没有切换答案

【问题标题】：Hamburger menu toggle state is not toggling in ReactJS汉堡菜单切换状态在 ReactJS 中没有切换
【发布时间】：2018-02-24 01:02:34
【问题描述】：

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

我为菜单项设置了一个 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 文档中的 listed for handling events。

这是 github 上的 link to the full file。

感谢您的帮助！长期潜伏者，第二次在这里提问。

【问题讨论】：

标签： javascript reactjs state hamburger-menu

【解决方案1】：

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

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

我也会在渲染方法中添加一个变量来保存切换状态的类名：

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

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

【讨论】：