我正在尝试修复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 .
谢谢你的帮助!长时间潜伏,第二次提问者在这里 .
1 回答
这是一个简单的切换方法:
我还会在render方法中添加一个变量来保存toggle状态的className:
如果您只想隐藏链接上的菜单,请单击将isToggle状态设置为false .