React onClick事件未渲染到DOM，自定义组件传递点击事件失效求助

问题原因 #

React采用合成事件系统管理所有事件回调，不会将onClick等驼峰命名的事件处理函数直接渲染为原生DOM的onclick属性，所有事件绑定都通过顶层事件委托实现，这是框架的正常设计，DOM上看不到onclick属性不代表绑定失效。

验证方式 #

你可以直接在RequestFact函数内加入打印逻辑验证绑定是否生效：

// index.js 中的RequestFact定义修改
const RequestFact = (e) => {
  // 阻止a标签默认跳转行为，避免页面刷新
  e.preventDefault()
  console.log('按钮点击触发成功')
  // 原有API调用逻辑
}

点击按钮后查看控制台是否有对应打印输出即可确认绑定是否正常。

额外注意事项 #

• 你当前用<a>标签模拟按钮，必须在点击回调中调用e.preventDefault()阻止默认的跳转行为，否则会出现页面刷新、回调逻辑未执行完就中断的问题
• 现有代码的props传递链路没有拼写错误，不需要修改传递逻辑：index.js传onClickEvent到NumberSelect，再透传到Button，最后绑定到<a>的onClick是正确的
• 如果需要语义更规范的按钮，可直接使用<button>标签代替<a>标签，不需要额外处理默认行为

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