React中如何给自定义组件绑定onClick事件以触发指定函数

问题根因 #

你给自定义组件传入的onClick本质是普通自定义属性，React不会自动把它绑定到组件内部的原生DOM元素上，必须手动在组件内部处理这个prop才能生效。

解决方案 #

方案1：修改Trash组件内部逻辑（推荐）

在Trash组件中接收onClick参数，绑定到内部的原生可点击元素上即可：

// Trash 组件内部代码示例
const Trash = ({ comment, onClick }) => {
  return (
    // 把外部传入的onClick绑定到原生按钮/图标节点上
    <button onClick={onClick} className="trash-icon">
      {/* 原有删除图标渲染逻辑 */}
    </button>
  )
}

调整后你原有父组件的代码不需要做任何修改，点击就可以触发handleClick。

方案2：外层包裹原生DOM容器（适合无法修改Trash组件源码的场景）

如果Trash是第三方组件、你无权修改其内部代码，可以在Trash外层套一层原生DOM标签，把onClick绑定到这个原生节点上：

const handleClick = () => {
  console.log('OK');
}

return (
  <div className="comment">
    {trash && (
      <div onClick={handleClick}>
        <Trash comment={comment} />
      </div>
    )}
  </div>
);

注意：如果Trash组件内部有阻止事件冒泡的逻辑，方案2可能会失效，优先选择方案1实现。

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