Javascript 使用引导4在React中下拉

当我单击导航栏中的单个下拉菜单链接时，所有下拉菜单链接也会显示。如何通过只显示一个下拉菜单链接来解决此问题

我已尝试更改指向aria labelledby的id值

这是我的应用程序的状态

      state = {
        dropDown: false
      };


      handleDropdown = e => {
            this.setState({ dropDown: !this.state.dropDown });
        };

在渲染函数内部

      render() {
        const { dropDown } = this.state;

      /*Conditional statement to select a class base on the state*/

      const dropMenu = dropDown ? 'dropdown-menu show' : 'dropdown-menu';

      /*The two dropdown menu list the displays(both) even when one is clicked*/

    <li className="nav-item dropdown">
                      <Link
                        onClick={this.handleDropdown}
                        className="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        Dropdown
                      </Link>
                      <div className={dropMenu} aria-labelledby="navbarDropdown">
                        <Link className="dropdown-item" to="#">
                          Action
                        </Link>
                        <Link className="dropdown-item" to="#">
                          Another action
                        </Link>
                        <div className="dropdown-divider" />
                        <Link className="dropdown-item" to="#">
                          Something else here
                        </Link>
                      </div>
                    </li>

    <li className="nav-item dropdown">
                      <Link
                        onClick={this.handleDropdown}
                        className="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        Dropdown
                      </Link>
                      <div className={dropMenu} aria-labelledby="navbarDropdown">
                        <Link className="dropdown-item" to="#">
                          Action
                        </Link>
                        <Link className="dropdown-item" to="#">
                          Another action
                        </Link>
                        <div className="dropdown-divider" />
                        <Link className="dropdown-item" to="#">
                          Something else here
                        </Link>
                      </div>
                    </li>
      };

render（）{
const{dropDown}=this.state；
/*用于根据状态选择类的条件语句*/
常量下拉菜单=下拉菜单？“下拉菜单显示”：“下拉菜单”；
/*两个下拉菜单列出显示（两个），即使单击一个也不例外*/

下拉列表
行动
另一个动作
还有别的吗


下拉列表
行动
另一个动作
还有别的吗

};

更新的代码

按如下方式更改状态变量：

state = {
  dropDownState: [false, false]
};

因为您刚刚有两个

li>div

数组包含两个元素，如果菜单项增加，也要增加它们

那么这个部门看起来就像

onClick={() => this.handleDropdown(0)}
onClick={() => this.handleDropdown(1)}

和

每个函数绑定如下所示

onClick={() => this.handleDropdown(0)}
onClick={() => this.handleDropdown(1)}

然后，实际函数将更改为

handleDropdown = (menuIndex) => {
   let newMenuState = this.state.dropDownState.map((val, index) => {
       if(index === menuIndex) {
           return !val
       } else return val
   });

  this.setState({ dropDownState: newMenuState })
};

请注意，我还没有运行我这边的代码，但你应该明白了

旧答案

将值绑定到函数，而不是调用函数：

改变

onClick={this.handleDropdown}

到

---

onClick={（）=>this.handleDropdown（）}

因为只有一个状态可以处理显示和隐藏下拉菜单。试着这样做：

state = {
  dropDown: {
    link1: false,
    link2: false,
  }
}

handleDropdown = e => {
  const { id } = e.target;

  this.setState(prevState => ({
    dropDown : {
      ...prevState.dropDown,
      [id]: !prevState.dropDown[id],
    }
  }));
}

render() {

const { dropDown } = this.state;

      /*Conditional statement to select a class base on the state*/

      const dropMenu = dropDown ? 'dropdown-menu show' : 'dropdown-menu';

      /*The two dropdown menu list the displays(both) even when one is clicked*/

    <li className="nav-item dropdown">
                      <Link
                        onClick={this.handleDropdown}
                        className="nav-link dropdown-toggle"
                        href="#"
                        id="link1" // name your id same as the variable from state dropDown
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        Dropdown
                      </Link>
                      <div className={`dropdown-menu ${dropDown.link1 ? 'show' : ''}`} aria-labelledby="navbarDropdown">
                        <Link className="dropdown-item" to="#">
                          Action
                        </Link>
                        <Link className="dropdown-item" to="#">
                          Another action
                        </Link>
                        <div className="dropdown-divider" />
                        <Link className="dropdown-item" to="#">
                          Something else here
                        </Link>
                      </div>
                    </li>

    <li className="nav-item dropdown">
                      <Link
                        onClick={this.handleDropdown}
                        className="nav-link dropdown-toggle"
                        href="#"
                        id="link2" // name your id same as the variable from state dropDown
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        Dropdown
                      </Link>
                      <div className={`dropdown-menu ${dropDown.link2 ? 'show' : ''}`} aria-labelledby="navbarDropdown">
                        <Link className="dropdown-item" to="#">
                          Action
                        </Link>
                        <Link className="dropdown-item" to="#">
                          Another action
                        </Link>
                        <div className="dropdown-divider" />
                        <Link className="dropdown-item" to="#">
                          Something else here
                        </Link>
                      </div>
                    </li>
}

状态={
下拉列表：{
链接1：错误，
链接2：错误，
}
}
handleDropdown=e=>{
const{id}=e.target；
this.setState（prevState=>({
下拉列表：{
…prevState.dropDown，
[id]：！prevState.下拉列表[id]，
}
}));
}
render（）{
const{dropDown}=this.state；
/*用于根据状态选择类的条件语句*/
常量下拉菜单=下拉菜单？“下拉菜单显示”：“下拉菜单”；
/*两个下拉菜单列出显示（两个），即使单击一个也不例外*/

下拉列表
行动
另一个动作
还有别的吗


下拉列表
行动
另一个动作
还有别的吗

}

---

希望它能起作用。

我尝试绑定该方法，但它仍然调用了两个下拉菜单链接。您在哪里使用const

const dropMenu

？我在你的代码中其他地方看不到它。您不需要将其用作每个

li

中的div类吗？不仅如此，一个状态变量决定了一个类，该类随后会影响每个

li

s中的所有div（在将const应用为div的类之后）。您需要使用数组使其成为动态的。每个数组元素都会保存每个

li>div

的状态。哎哟，对不起。我刚刚编辑了代码。确切地说，我在li中的div上使用了dropMenu，问题仍然存在。求你了，我没有找到让它动态的路径。因为const dropMenu根据渲染函数中的下拉状态保存类。谢谢你的时间，我快找到解决办法了。I console.log（dropMenu[0]），您在更新的代码中的div元素中使用了它，并获得了类的第一个字母d（即下拉菜单）。请将

更改为

，很抱歉我错过了该部分。基本上使用新状态变量中的数组元素。作为手动编写的替代方法，您应该使用其他人的代码。这有所有的引导4菜单的预先存在。感谢资源。但是在这个项目中，我想使用引导作为一个依赖项，而不是使用像react Bootstrap这样的引导包