Question

我正在尝试修复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 docs listed for handling events的内容。

这是github上的link to the full file。

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

Answer 1

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

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

我还会在render方法中添加一个变量来保存切换状态的className：

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

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

汉堡菜单切换状态不是在ReactJS中切换

1 个答案: