当我点击导航栏中的单个下拉菜单链接时,所有的下拉菜单链接也显示或显示。如何通过只显示一个下拉菜单链接来解决此问题?
我尝试更改指向 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>
};
最佳答案
因为您只有 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>
}
希望它有用。
关于javascript - 使用 bootstrap 4 在 React 中下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55828674/