Javascript react JS中的菜单切换

我在react js中实现了一个菜单切换。问题是当我点击一个li项目时，不管发生什么，最后一个li项目总是打开的。我只想显示那个特定的菜单。其他菜单应隐藏。我找不到问题

代码笔链接：

代码在这里

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

var el=document.querySelector（“#app”）
类编辑器扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.state={display:false，
显示1：错误，
显示2：错误，
显示3:false，}；
}
手变（e）{
var ID=e.target.ID
控制台日志（ID）
如果（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（）{
返回(
标题

快餐↓；

Berger



咖啡
Tea↓；

红茶
绿茶


Milk↓；

牛奶
山羊奶


冷饮↓；


Sprite



);
}
}
ReactDOM.render（，el）；

如果：

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

您忘记了一个if：

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

---

您的最后一个if子句没有按您希望的方式工作

更新了你的密码笔

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

}
//....

---

您的最后一个if子句没有按您希望的方式工作

更新了你的密码笔

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

}
//....

---

它确实存在，但

（ID==4）

不存在，因为它将作为一个常用表达式进行计算，而不是作为一个if检查进行计算-因此，如果上面的if检查失败，但

（ID==4）不存在，它将始终执行

不是因为它将作为一个常用表达式计算，而不是作为if检查计算-因此，如果上面的if检查失败，它将始终执行。您不能使用带有

else

语句的谓词。如果上面的

if

没有被触发，将调用

else

语句。在您的代码中，最后一个块不在

if

语句中，并且每次都会调用。如果这解决了您的问题，请您接受答案（向上/向下投票按钮下方的白色复选标记）以指示此问题已得到回答。谢谢。不能将谓词与

else

语句一起使用。如果上面的

if

没有被触发，将调用

else

语句。在您的代码中，最后一个块不在

if

语句中，并且每次都会调用。如果这解决了您的问题，请您接受答案（向上/向下投票按钮下方的白色复选标记）以指示此问题已得到回答。谢谢