react JS中的菜单切换

Question

我在react js中实现了一个菜单切换。问题是当我点击一个li项时，.the最后一个li项总是打开的。我只希望显示那个特定的菜单。应隐藏其他菜单。我找不到问题所在。

代码笔链接：https://codepen.io/nahidmbstu/pen/QQNdjN

代码在这里

var el = document.querySelector("#app")

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { display : false,  
                  display1 : false , 
                  display2 : false, 
                  display3 : false,  };
  }

  handleChange(e) {
    var ID = e.target.id

    console.log(ID )
    if (ID == 1 )
    {
      this.setState({ display: ! this.state.display } );
    }
    else if (ID == 2)
    {
      this.setState({ display1: ! this.state.display1 } );

    }
      else if (ID == 3)
    {
      this.setState({ display2: ! this.state.display2 } );

    }
      else (ID == 4)
    {
       this.setState({ display3: ! this.state.display3 } );

    }

  }


  render() {
    return (
      <div className="container">
        <div className= "row">
          <div className= "col-md-12 offset-3">
            Header
          </div>
        </div>
        <div className= "row">

          <div className= "col-md-4 offset-3">

                   <ul class = "menu-list">
                     <li class = "primary-menu" id = "1" onClick = { this.handleChange }>fastfood &#8595;
                        <ul class = "submenu-list">
                             <li class = "submenu" style={ { display: this.state.display ? 'block' : 'none' }}>Berger</li>
                             <li class = "submenu" style={ { display: this.state.display ? 'block' : 'none' }}>Pizza</li>
                        </ul>
                    </li>

                    <li class = "primary-menu">Coffee</li>

                    <li class = "primary-menu"  id = "2" onClick = { this.handleChange }>Tea &#8595;
                       <ul class = "submenu-list" >
                          <li class = "submenu" style={ { display: this.state.display1 ? 'block' : 'none' }}>Black tea</li>
                           <li class = "submenu" style={ { display: this.state.display1 ? 'block' : 'none' }}>Green tea</li>
                      </ul>
                    </li>

                    <li class = "primary-menu"  id = "3" onClick = { this.handleChange }>Milk &#8595;
                        <ul class = "submenu-list">
                           <li class = "submenu" style={ { display: this.state.display2 ? 'block' : 'none' }}>cow milk</li>
                             <li class = "submenu" style={ { display: this.state.display2 ? 'block' : 'none' }}>goat milk</li>
                        </ul>
                     </li>
                      <li class = "primary-menu"  id = "4" onClick = { this.handleChange }>Cold Drinks  &#8595;
                        <ul class = "submenu-list">
                           <li class = "submenu" style={ { display: this.state.display3 ? 'block' : 'none' }}>Coke</li>
                           <li class = "submenu" style={ { display: this.state.display3 ? 'block' : 'none' }}>Sprite</li>
                        </ul>
                     </li>
                  </ul>

          </div>
           <div className= "col-md-8 offset-3">

          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Editor />, el);

Answer 1

你忘了一个if：

 else (ID == 4){
 =>
 else if (ID == 4){

Answer 2

您的最后一个if子句没有按您希望的那样工作。

https://codepen.io/anon/pen/gvMwXL

更新了你的代码

//....
else if (ID == 4) //add "if" here
{
   this.setState({ display3: ! this.state.display3 } );

}
//....