React中map遍历渲染的<Link>组件点击无响应问题排查

最常见的诱因是输入框失焦事件的触发时序问题：

• 代码中搜索输入框绑定了onBlur={handleFocusOut}，常规业务逻辑里这个方法会直接隐藏/卸载搜索结果下拉容器（即className={style.dataWindow}的列表区域）。当你点击列表内的<Link>时，焦点会先从输入框移出，onBlur事件的触发时机早于Link的点击事件，会瞬间把整个结果列表隐藏或从DOM中移除，等鼠标点击动作完成时，原本位置的Link已经不存在，自然无法触发跳转。
• 页面顶部写死的第一个<Link>位于搜索框区域上方，不受输入框失焦隐藏逻辑的影响，因此可以正常跳转。

其他可能的诱因：

• 列表项外层容器绑定了点击事件，且调用了e.stopPropagation()或e.preventDefault()拦截了Link的默认跳转行为
• 遍历用的searchInput数组存在重复的value.id，导致React虚拟DOM渲染匹配异常
• 结果列表相关CSS设置了pointer-events: none属性，拦截了鼠标点击事件（顶部写死的Link未受该样式影响）

针对onBlur时序问题（90%以上的同类问题都是这个原因） #

任选一种方案修复即可：

1. 给失焦后的隐藏逻辑加短延迟，等待Link的点击事件执行完成后再隐藏列表

const handleFocusOut = () => {
  // 加150-200ms延迟即可，不要太长避免交互卡顿
  setTimeout(() => {
    // 这里放你原本的隐藏搜索结果的逻辑，例如 setShowSearchResult(false)
  }, 200)
}

2. 给搜索结果列表容器绑定onMouseDown事件，阻止默认行为避免输入框提前失焦

<div 
  className={style.dataWindow}
  onMouseDown={(e) => e.preventDefault()}
>
  {searchInput.map((value, key) =>{
    return(
      <div className={style.dataItem} key={value.id}>
        <p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p>
      </div>
    );
  })}
</div>

3. 放弃用onBlur控制列表隐藏，改为监听全局点击事件，判断点击落点在搜索组件外时再隐藏列表。

针对其他低概率诱因 #

• 检查列表项、列表容器的绑定事件，移除不必要的事件拦截、冒泡阻止逻辑
• 确保searchInput每一项的id唯一，避免key重复导致的渲染异常
• 排查相关CSS代码，移除列表区域、Link元素上不合理的pointer-events: none设置

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