React onClick未传目标参数却传入SyntheticBaseEvent的修复方法

错误原因 #

1. 父组件传递popup的方式错误：() => popup返回的是popup函数本身，而非带参数的调用逻辑；
2. StoreItem中onClick绑定错误：onClick={popup(item)}会在组件渲染时立即执行popup(item)，而非点击时触发，加上父组件的传递问题，最终导致popup函数收到的是React合成事件对象SyntheticBaseEvent。

修复方案（二选一即可） #

方案一：在StoreItem中绑定点击逻辑

修改父组件传递方式，直接传入popup函数：

items.map(item => (
  <StoreItem popup={popup} item={item} />
))         

修改StoreItem组件，用箭头函数包裹点击触发逻辑：

const StoreItem = ({popup, item}) => {
  return (
    <div onClick={() => popup(item)} className="...">
    ...
    </div>
  );
};

方案二：在父组件中提前绑定参数

父组件直接传递绑定好item的函数：

items.map(item => (
  <StoreItem popup={() => popup(item)} item={item} />
))         

StoreItem组件直接使用传入的popup作为点击事件：

const StoreItem = ({popup, item}) => {
  return (
    <div onClick={popup} className="...">
    ...
    </div>
  );
};

效果验证 #

修改后点击div元素，console.log(item)会正确输出当前点击的item对象，而非合成事件。

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