map函数内OnClick事件未触发问题求助

问题根源 #

核心问题是input的onBlur事件优先级比<li>的onClick高：当点击列表项时，浏览器会先触发input的onBlur，将showSuggestions设为false，列表直接被卸载，<li>的点击事件自然无法执行。

方案1：用mousedown替代onClick（推荐） #

mousedown事件会在blur之前触发，能确保点击逻辑先执行，再处理状态变化。修改代码如下：

{suggestions.map((s) => (
  <li 
    onMouseDown={() => console.log("hello list")}
    key={s}>
      🔍{s}
  </li>
))}

方案2：给列表添加延迟隐藏逻辑 #

通过setTimeout让列表延迟隐藏，给点击事件留执行时间：

1. 先创建一个Ref存储定时器ID：

const blurTimeoutRef = useRef(null);

2. 修改input的onBlur事件：

onBlur={() => {
  blurTimeoutRef.current = setTimeout(() => setShowSuggestions(false), 100);
}}

3. 给列表容器添加鼠标进出事件，避免误隐藏：

{showSuggestions && (
  <div 
    onMouseEnter={() => clearTimeout(blurTimeoutRef.current)}
    onMouseLeave={() => setShowSuggestions(false)}
  >
    <ul>
      {suggestions.map((s) => (
        <li 
          onClick={() => console.log("hello list")}
          key={s}>
            🔍{s}
        </li>
      ))}
    </ul>
  </div>
)}

4. 组件卸载时清除定时器，防止内存泄漏：

useEffect(() => {
  return () => clearTimeout(blurTimeoutRef.current);
}, []);

额外注意事项 #

• 确保suggestions数组内元素唯一，避免key值重复引发渲染异常；
• 如果使用方案2，延迟时间建议控制在100ms以内，避免出现视觉延迟感。

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