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