React中如何在失焦（Blur）时隐藏自动补全（Autocomplete）框

数据老陈

2026-10-5

实现点击外部关闭自动补全框的方案

你需要通过监听全局点击事件，判断点击区域是否在自动补全组件外，再执行关闭逻辑，具体实现步骤如下：

先给包裹输入框和补全建议列表的外层容器绑定useRef：

import { useRef, useEffect } from 'react';

// 原有状态定义
const [isAutoComplete, setIsAutoCompelte] = useState(false);
// 新增ref绑定容器
const autoCompleteWrapperRef = useRef(null);

在组件JSX中给外层容器关联ref：

<div ref={autoCompleteWrapperRef}>
  {/* 你的输入框 */}
  <input onChange={onHandleChangeInput} />
  {/* 你的补全建议列表 */}
  {isAutoComplete && <ul>{/* 建议项 */}</ul>}
</div>

新增useEffect监听全局点击事件，判断是否点击外部后关闭：

useEffect(() => {
  const handleOutsideClick = (event) => {
    // 点击区域不在自动补全容器内时，触发关闭
    if (
      autoCompleteWrapperRef.current 
      && !autoCompleteWrapperRef.current.contains(event.target)
    ) {
      setIsAutoCompelte(false);
    }
  };
  // 绑定全局鼠标点击事件
  document.addEventListener('mousedown', handleOutsideClick);
  // 组件卸载时移除监听，避免内存泄漏
  return () => document.removeEventListener('mousedown', handleOutsideClick);
}, []);