react-burger-menu isOpen 道具对状态变化没有反应

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仍然为 false。

要解决此问题，您需要将父组件的状态与菜单的isOpen状态保持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>
    )
  }