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

Question

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

我为菜单项设置了一个 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 .

这是一个 link to the full file在github上。

感谢您的帮助!长期潜伏者，第二次提问。

Answer 1

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

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

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

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

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