使用引导程序 4 在 React 中的下拉菜单

Question

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

我已尝试更改指向 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>
      };

Answer 1

因为您只有 1 个状态来处理显示和隐藏下拉菜单。尝试这样做：

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

希望它有效。

Answer 2

更新代码

改变状态变量如下：

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

由于您只有两个li > div，因此该数组包含两个元素，如果菜单项增加，则也增加它们。

那么 div 的样子

<div className={dropMenu[0]} aria-labelledby="navbarDropdown"> 和 <div className={dropMenu[1]} aria-labelledby="navbarDropdown">

每个函数绑定看起来像

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