反应汉堡菜单是打开道具不对状态变化做出反应

Question

我的应用程序将react-burger-menu用于仅限移动设备的汉堡菜单。单击菜单中的项目时，我希望关闭菜单，但没有任何反应。(旁注 - 如果我在父组件中设置menuIsOpen: true，它确实在页面加载时打开，并且我第一次单击列表项时侧边栏确实会关闭，但如果我重新打开它然后再次尝试，则没有任何反应。

父组件(完整代码(：

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}
/>
);

子组件(完整代码(：

<Menu isOpen={this.props.menuIsOpen}>
<div className="sidebar">
</div>
</Menu>

查看实时版本：https://nataliecardot.com/seattle-scoops/

Answer 1

有同样的问题。我认为问题是您没有侦听汉堡按钮来打开菜单，因此示例中的menuIsOpen状态永远不会设置为 true。因此，当单击菜单项时，没有任何要更新的内容 -menuIsOpen仍然是假的。

若要解决此问题，您需要使父组件的状态与菜单的isOpen状态保持同步。(图书馆的作者已经发布了一些这方面的例子(。我相信你可以用钩子做到这一点，但我缺乏经验，也不确定如何做。不过，这是一个示例类版本。

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>
)
}