React组件事件竞争问题：点击自动补全项时事件未触发

问题场景 #

实现带自动补全的搜索栏时，输入框失焦会隐藏补全列表，但点击补全项时，输入框的setValue状态更新不生效——点击补全项后输入框内容没有变化。

原因分析 #

浏览器的事件触发顺序为：mousedown → blur → mouseup → click。当点击补全项时，输入框的onBlur会先执行，将focused设为false，导致React重新渲染时补全列表被卸载，后续的onClick事件自然不会触发。

解决方案 #

方案1：用onMouseDown替代onClick #

直接将补全项的点击事件替换为onMouseDown，因为mousedown在blur之前触发，能先完成状态更新，之后再处理blur隐藏列表。

修改后的核心代码：

{focused && (
  <div>
    <div className="item" onMouseDown={() => setValue("item 1")}>item 1</div>
    <div className="item" onMouseDown={() => setValue("item 2")}>item 2</div>
  </div>
)}

方案2：给onBlur添加延迟 #

通过setTimeout延迟执行setFocused(false)，让onClick有足够时间触发。注意要清理定时器避免内存泄漏。

完整代码示例：

function App() {
  const [value, setValue] = React.useState("");
  const [focused, setFocused] = React.useState(false);
  const blurTimeoutRef = React.useRef(null);

  // 组件卸载时清理定时器
  React.useEffect(() => {
    return () => blurTimeoutRef.current && clearTimeout(blurTimeoutRef.current);
  }, []);

  return(
    <>
      <input 
        value={value} 
        onChange={e => setValue(e.currentTarget.value)} 
        onFocus={() => {
          // 聚焦时清除未执行的延迟
          if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
          setFocused(true);
        }} 
        onBlur={() => {
          blurTimeoutRef.current = setTimeout(() => setFocused(false), 100);
        }} 
      />
      {focused && (
        <div>
          <div className="item" onClick={() => setValue("item 1")}>item 1</div>
          <div className="item" onClick={() => setValue("item 2")}>item 2</div>
        </div>
      )}
    </>
  );
}

方案3：用容器统一管理焦点 #

将输入框和补全列表放在同一个可聚焦容器内，通过判断焦点是否仍在容器内来决定是否隐藏列表，从根源避免事件竞争。

完整代码示例：

function App() {
  const [value, setValue] = React.useState("");
  const [focused, setFocused] = React.useState(false);
  const containerRef = React.useRef(null);

  return(
    <div 
      ref={containerRef}
      tabIndex="-1" // 让容器可聚焦但不参与Tab导航
      onFocus={() => setFocused(true)}
      onBlur={(e) => {
        // 检查失去焦点后，新焦点是否仍在容器内
        if (!containerRef.current.contains(e.relatedTarget)) {
          setFocused(false);
        }
      }}
      style={{ outline: "none" }} // 移除默认聚焦边框
    >
      <input 
        value={value} 
        onChange={e => setValue(e.currentTarget.value)} 
      />
      {focused && (
        <div>
          <div className="item" onClick={() => setValue("item 1")}>item 1</div>
          <div className="item" onClick={() => setValue("item 2")}>item 2</div>
        </div>
      )}
    </div>
  );
}

方案对比 #

• 方案1：实现最简单，无额外逻辑，适合大多数基础场景。
• 方案2：兼容性好，但依赖定时器延迟，可能存在微小的视觉延迟。
• 方案3：逻辑最健壮，适合复杂组件结构，能处理更多边缘情况（如键盘导航补全）。

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