本文介绍在 React 应用中，通过 onFocus 和 onBlur 事件控制搜索建议下拉列表的显隐逻辑，解决点击输入框外部时列表不自动收起的问题，确保交互体验符合用户预期。
本文介绍在 react 应用中，通过 `onfocus` 和 `onblur` 事件控制搜索建议下拉列表的显隐逻辑，解决点击输入框外部时列表不自动收起的问题，确保交互体验符合用户预期。
在构建带搜索建议功能的输入组件时，一个常见且关键的交互需求是：当用户聚焦（focus）输入框时显示建议列表，而一旦焦点离开（blur）——无论是点击页面其他区域、按 Tab 切换，还是点击建议项后——列表应立即收起。原代码中仅依赖 itemsAfterSearch.length 渲染建议区域，缺乏对焦点状态的响应，导致列表“悬停不消失”，影响用户体验。
✅ 正确实现方式：使用 onFocus / onBlur 管理展开状态
推荐引入一个受控的布尔状态 isExpanded，明确表达下拉区域的可见性，并将其与 <input> 的焦点生命周期绑定：
import { useState, useMemo } from 'react';
import { useNodes } from './hooks';
export function View() {
const { data: nodes } = useNodes();
const [nodeQuery, setNodeQuery] = useState('');
const [isExpanded, setIsExpanded] = useState(false); // 控制下拉显隐
const itemsDisplay = useMemo(() => nodes, [nodes]);
const itemsAfterSearch = itemsDisplay.filter((node_) =>
nodeQuery && node_.title.toLowerCase().includes(nodeQuery.toLowerCase())
);
return (
<div className="search-container">
<input
type="text"
value={nodeQuery}
onChange={(e) => setNodeQuery(e.target.value)}
onFocus={() => setIsExpanded(true)} // 聚焦时展开
onBlur={() => setIsExpanded(false)} // 失焦时收起
placeholder="搜索节点..."
/>
{/* 仅当展开且有匹配项时渲染建议列表 */}
{isExpanded && itemsAfterSearch.length > 0 && (
<div className="suggestions-dropdown">
{itemsAfterSearch.map((node_) => (
<button
key={node_.id}
className="suggestion-item"
onClick={() => {
setNodeQuery(node_.title);
// setNode(node_); // 根据业务补充
setIsExpanded(false); // 选中后立即收起
}}
>
{node_.title}
</button>
))}
</div>
)}
</div>
);
}? 对应 CSS 示例（推荐使用 display: none 而非 visibility: hidden）
.search-container {
position: relative;
}
.suggestions-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-top: none;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.suggestion-item {
display: block;
width: 100%;
text-align: left;
padding: 8px 12px;
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
}
.suggestion-item:hover {
background-color: #f5f5f5;
}⚠️ 注意事项与最佳实践
-
避免仅依赖
onClick外部区域监听：虽然可通过useEffect + useRef + document.addEventListener('click')实现“点击外部收起”，但易引发竞态、重复绑定或内存泄漏，且不符合语义化焦点管理原则；onBlur是更简洁、标准、无障碍友好的方案。 -
onBlur触发时机：它会在焦点真正离开<input>元素时触发（包括点击按钮、切换 Tab、点击页面空白等），但注意：点击建议按钮本身也会先触发onBlur，再触发onClick—— 因此需在onClick中手动调用setIsExpanded(false)，否则可能因状态更新延迟导致“闪现”。 -
空查询处理：示例中已优化过滤逻辑（仅当
nodeQuery非空时才匹配），避免空输入时展示全部数据。 -
可访问性增强：可额外添加
aria-expanded和aria-controls属性，配合键盘操作（如 Esc 键收起），进一步提升无障碍支持。
通过聚焦/失焦状态精准驱动 UI 变化，既保持逻辑清晰，又兼顾性能与可维护性，是构建专业级搜索组件的推荐范式。
