[英]react-burger-menu isOpen prop not reacting to state change
My app uses react-burger-menu
for a mobile only hamburger menu.我的应用程序使用
react-burger-menu
作为仅限移动设备的汉堡包菜单。 When an item from the menu is clicked, I'd like the menu to close, but nothing happens.当单击菜单中的一项时,我希望菜单关闭,但没有任何反应。 (Side note - if I set
menuIsOpen: true
in the parent component, it is indeed open on page load, and the first time I click a list item the sidebar does close but if I reopen it and then try it again nothing happens.) (旁注 - 如果我在父组件中设置
menuIsOpen: true
,它确实在页面加载时打开,并且第一次单击列表项时侧边栏确实关闭,但如果我重新打开它然后再试一次,则什么也没有发生。)
Parent component ( full code ):父组件( 完整代码):
this.state = {
menuIsOpen: false
};
// Gets called when an item in sidebar is clicked
handleVenuesListItemClick = venue => {
this.setState({ menuIsOpen: false });
};
render() {
return (
<Sidebar
menuIsOpen={this.state.menuIsOpen}
/>
);
Child component ( full code ):子组件( 完整代码):
<Menu isOpen={this.props.menuIsOpen}>
<div className="sidebar">
</div>
</Menu>
View live version: https://nataliecardot.com/seattle-scoops/查看实时版本: https : //nataliecardot.com/seattle-scoops/
Had this same issue.有同样的问题。 I think the problem is that you're not listening for the burger button to open the menu, and so the
menuIsOpen
state in the example doesn't ever get set to true.我认为问题在于您没有监听汉堡按钮来打开菜单,因此示例中的
menuIsOpen
状态从未设置为 true。 As a result, when a menu item is clicked, there is nothing to update-- menuIsOpen
is still false.结果,当单击菜单项时,没有任何更新——
menuIsOpen
仍然为 false。
To fix, you'll need to keep your parent component's state up to date with the menu's isOpen
state.要解决此问题,您需要将父组件的状态与菜单的
isOpen
状态保持isOpen
。 (The library's author has posted a few examples of this ). (图书馆的作者已经发布了一些这方面的例子)。 I am sure you can do this with hooks, but I'm inexperienced, and am not sure how.
我相信你可以用钩子来做到这一点,但我没有经验,也不知道怎么做。 Here's an example class version, though.
不过,这是一个示例类版本。
import React, { Component } from 'react';
import { slide as Menu } from 'react-burger-menu'
class MobileExample extends Component {
constructor(props) {
super(props)
this.state = {
menuOpen: false
}
this.handleStateChange=this.handleStateChange.bind(this);
this.handleLinkClick=this.handleLinkClick.bind(this);
}
handleStateChange(state) {
this.setState({menuOpen:state.isOpen})
}
handleLinkClick(e) {
this.setState({menuOpen:false})
}
render() {
return (
<Menu onStateChange={this.handleStateChange} isOpen={this.state.menu}>
<nav>
<ul>
<a href="/" onClick={()=>this.handleLinkClick()}>Home</a>
<a href="/path-two" onClick={()=>this.handleLinkClick()}>Link text</a>
<a href="/path-three" onClick={()=>this.handleLinkClick()}>Link text</a>
</ul>
</nav>
</Menu>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.