本文介绍一种简洁可靠的方案：利用 tabIndex 和 onBlur 事件，配合事件冒泡控制，确保同一时间仅有一个下拉菜单处于展开状态，点击任一下拉触发器或外部区域均可正确收起其余已打开项。
本文介绍一种简洁可靠的方案：利用 `tabindex` 和 `onblur` 事件，配合事件冒泡控制，确保同一时间仅有一个下拉菜单处于展开状态，点击任一下拉触发器或外部区域均可正确收起其余已打开项。
在多下拉组件共存的界面中（如导航栏、筛选面板或设置模块），常见交互需求是“单开多选”——即点击一个下拉时，其他已展开的下拉应自动收起。但默认情况下，React 中基于 onClick 或 useEffect + useRef 的简单实现往往无法捕获“从一个下拉切换到另一个”的场景，导致多个下拉同时保持打开状态，破坏用户体验。
核心解决思路是将每个下拉容器变为可聚焦元素，并借助浏览器原生的 blur 事件机制：当焦点离开当前下拉（例如用户点击了另一个下拉或页面空白处）时，触发收起逻辑。这比监听全局 click 并手动判断目标位置更健壮、语义更清晰。
具体实现如下：
-
为下拉容器添加
tabIndex="0"，使其可获得焦点； -
绑定
onBlur处理函数，并在其中调用setIsOpenDropdown(false)； -
在
onBlur中调用e.stopPropagation()，防止事件冒泡干扰父级逻辑（尤其当嵌套在表单或模态框中时）； -
保持
onClick触发器不变，用于主动展开/切换当前下拉。
function Dropdown({ children, isOpen, onToggle }) {
const handleOnBlur = (e) => {
e.stopPropagation();
onToggle(false); // 收起当前下拉
};
return (
<div
className="dropdown-wrapper"
tabIndex="0"
onBlur={handleOnBlur}
>
<button
className="dropdown-btn"
onClick={() => onToggle(!isOpen)}
>
{isOpen ? 'Hide' : 'Show'} Options
</button>
{isOpen && (
<div className="dropdown-menu">
{children}
</div>
)}
</div>
);
}⚠️ 注意事项：
- 确保每个下拉组件独立管理自身
isOpen状态（推荐使用useState或自定义 Hook），避免共享状态引发竞态； - 若需支持键盘导航（如 Tab 键切换），可进一步增强
onKeyDown逻辑（例如按Escape关闭）； - 不要移除
tabIndex或禁用聚焦行为，否则onBlur将无法触发； - 在 CSS 中建议添加
outline: none配合:focus-visible实现无障碍友好的焦点样式。
该方案轻量、无第三方依赖、兼容主流浏览器，并已在实际项目中验证稳定性。相比轮询 document.addEventListener('click') 或复杂 ref 判断，它更符合 React 声明式思维与浏览器原生交互规范。
