React函数组件如何编写点击事件实现单状态控制对应下拉框显隐

实现思路 #

你当前所有下拉同步显隐的核心原因是用了同一个布尔状态控制所有下拉元素，单个状态实现需求只需把状态类型从布尔值改成存储当前激活下拉的唯一标识即可，不需要新增多个状态。

1. 修改状态定义与点击逻辑 #

把原来的布尔状态初始值改为null，用来存储当前打开的下拉序号：

// 初始值为null代表没有下拉打开
const [activeDropdown, setActiveDropdown] = useState(null);

// 接收点击按钮对应的下拉标识作为参数
const handleDropdown = (dropdownId) => {
  // 如果点击的是当前已经打开的下拉，就关闭；否则切换为点击的下拉
  setActiveDropdown(prev => prev === dropdownId ? null : dropdownId);
}

2. 修改JSX绑定逻辑 #

给每个按钮传入对应下拉的标识，同时每个下拉只判断自己的标识是否和当前激活状态一致：

{/* 按钮绑定对应下拉的序号 */}
<button type="button" onClick={() => handleDropdown(1)}>Button 1</button>
<button type="button" onClick={() => handleDropdown(2)}>Button 2</button>
<button type="button" onClick={() => handleDropdown(3)}>Button 3</button>

{/* 每个下拉只判断自己的序号是否等于激活状态 */}
<div className={`dropdown-menu ${activeDropdown === 1 ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
</div>
<div className={`dropdown-menu ${activeDropdown === 2 ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
</div>
<div className={`dropdown-menu ${activeDropdown === 3 ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
</div>

3. 补充CSS（可选优化） #

补充hide类的显式声明，避免样式冲突：

.dropdown-menu {
  display: none;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-menu.hide {
  display: none;
}

如果需要支持同时打开多个下拉，只需把状态改成数组类型存储所有已打开的下拉标识，点击时往数组里新增/移除对应id即可。

内容的提问来源于stack exchange，提问作者Ganesh G