本文介绍在 React 中实现搜索输入框失焦时自动隐藏建议列表的完整方案，通过 onFocus 和 onBlur 事件控制显示状态，并结合 CSS 类动态切换可见性。
本文介绍在 react 中实现搜索输入框失焦时自动隐藏建议列表的完整方案，通过 `onfocus` 和 `onblur` 事件控制显示状态，并结合 css 类动态切换可见性。
在构建带自动补全功能的搜索组件时，一个常见且关键的交互需求是：当用户聚焦输入框（如点击或 Tab 进入）时展开建议列表；而一旦焦点离开输入框（例如点击页面其他区域、按 Tab 切出、或点击建议项后），列表应立即收起——避免悬浮残留干扰用户体验。
核心思路是使用 React 的 useState 管理下拉列表的展开状态，并通过 <input> 的 onFocus 和 onBlur 事件精准触发状态更新。注意：onBlur 在点击建议按钮时也会触发（因按钮位于 input 外部，焦点会先从 input 移出），因此无需额外处理“选中后收起”逻辑——它天然被 onBlur 覆盖，简洁可靠。
以下是优化后的完整实现：
import { useState, useMemo } from 'react';
import { useNodes } from './hooks'; // 假设自定义 hook
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 为 true 时渲染 */}
{isExpanded && itemsAfterSearch.length > 0 && (
<div className="suggestions-dropdown">
{itemsAfterSearch.map((node_) => (
<button
key={node_.id}
className="suggestion-item"
onClick={() => {
setNodeQuery(node_.title);
// 假设 setNode 是父级传入或已定义
// setNode(node_);
setIsExpanded(false); // 显式收起（增强确定性，可选）
}}
>
{node_.title}
</button>
))}
</div>
)}
</div>
);
}配套 CSS 示例（推荐使用 opacity + pointer-events 或 visibility 实现平滑过渡）：
.search-container {
position: relative;
}
.suggestions-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
}
.suggestion-item {
display: block;
width: 100%;
text-align: left;
padding: 8px 12px;
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
}
.suggestion-item:hover {
background-color: #f5f5f5;
}
/* 可选：添加淡入淡出动画 */
.suggestions-dropdown {
opacity: 1;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.suggestions-dropdown[hidden] {
opacity: 0;
pointer-events: none;
}⚠️ 重要注意事项：
- 避免仅依赖
onClick外部区域监听（如document.addEventListener('click')），易引发竞态、重复绑定或内存泄漏，onBlur是语义更准确、更轻量的标准方案； - 若需支持键盘操作（如 Esc 关闭），可补充
onKeyDown监听：event.key === 'Escape' && setIsExpanded(false)； -
onBlur在点击建议项时触发是预期行为，但为提升响应确定性，建议在onClick回调中显式调用setIsExpanded(false)（如上例所示）； - 列表容器必须使用
position: absolute并置于 input 同一position: relative父容器内，确保定位准确； - 对于无障碍访问（a11y），应添加
role="listbox"、role="option"及aria-*属性，此处为聚焦核心逻辑暂略。
该方案简洁、健壮、符合 React 最佳实践，可直接集成到各类搜索/选择组件中。
