React点击加购按钮console输出Synthetic Base Event而非对应商品如何解决

问题原因 #

你的代码问题出在Function.prototype.bind的用法错误：

• bind方法的第一个参数用于指定函数执行时的this指向，从第二个参数开始才是调用函数时提前传入的实参
• 你写的clickMe.bind(item)仅将clickMe的this绑定为商品对象，没有给clickMe传入任何参数
• React触发点击事件时，会默认将合成事件对象作为第一个参数传给事件处理函数，所以你在clickMe里拿到的item实际是React的合成事件对象

修复方案 #

有两种常用修复方式，任选其一即可：

方案1：修正bind的传参 #

将a标签的onClick属性修改为：

<a onClick={clickMe.bind(null, item)}>add to cart</a>

这里第一个参数传null（不需要修改this指向时可以传null或undefined），第二个参数才是要传给clickMe的商品对象。

方案2（更推荐）：用箭头函数包裹调用 #

将a标签的onClick属性修改为：

<a onClick={() => clickMe(item)}>add to cart</a>

这种写法更直观，也避免了bind相关的this指向混淆问题。

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