React项目中SuggestionsList组件内li的onClick点击事件失效如何解决

问题根因 #

你写的onClick={finddoctor(suggestion.id)}属于组件渲染时直接执行函数，而非点击时触发：

• 这段代码在渲染SuggestionsList列表项时就会立即调用finddoctor，而不是等到用户点击li元素时才执行
• 如果你的本地React版本比测试环境的版本校验更严格，或者存在其他副作用拦截了直接执行后的事件绑定，就会出现不同环境运行效果不一致的差异

修复方案 #

把onClick的赋值改成函数引用形式，两种写法可选：

1. 箭头函数包裹（最常用）

<li
  style={styles.listyle}
  onClick={() => finddoctor(suggestion.id)}
  key={index}
  className={classname}
>
  {suggestion.firstname}
</li>

2. 使用bind绑定参数

<li
  style={styles.listyle}
  onClick={finddoctor.bind(null, suggestion.id)}
  key={index}
  className={classname}
>
  {suggestion.firstname}
</li>

小提示：你finddoctor函数中跳转路径末尾多了一个多余的空格，建议改成history.push(/detiled/${e})避免跳转404

其他可选排查点 #

• 检查li上层元素是否绑定了stopPropagation阻止了点击事件冒泡
• 检查styles.listyle中是否设置了pointer-events: none导致点击事件被拦截
• 确认history对象是从react-router正确导出的，没有实例异常

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