[英]Dropdown in React using bootstrap 4
當我單擊導航欄中的單個下拉菜單鏈接時,也會顯示或顯示所有下拉菜單鏈接。 如何通過僅顯示一個下拉菜單鏈接來解決此問題?
我嘗試更改指向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>
};
更新的代碼
更改狀態變量,如下所示:
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()}
因為您只有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>
}
希望它能工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.