React中为onKeyPress事件处理函数传递额外参数的问题

我懂你遇到的困扰啦——想给onHitEnter方法传额外参数，但按之前的写法就是拿不到正确的事件对象对吧？问题出在参数传递的顺序上，咱们来一步步搞定它：

问题根源 #

当你用bind给事件方法传参时，bind里的额外参数会排在事件对象e的前面被传递到方法中。你原来的方法定义把e放在第一个参数的位置，自然就拿不到正确的键盘事件啦。

方法1：调整bind传参后的方法参数顺序 #

这是最直接的修改方式，只需要把方法里的参数顺序换一下：

// 组件里的事件绑定（和你原来的写法一致）
<input 
  onKeyPress={this.onHitEnter.bind(this, item, item.id, item.index)} 
/>

// 调整方法的参数顺序：先接收额外参数，再接收事件对象
onHitEnter = (item, id, index, e) => {
  if (e.key === 'Enter') {
    console.log('按下回车键！', item, id, index);
  }
}

方法2：用箭头函数包裹（更直观） #

如果你不想调整参数顺序，也可以用箭头函数直接把事件对象和额外参数一起传给方法，这样参数顺序就和你最初的定义一致了：

// 用箭头函数包裹，手动传递事件对象e和额外参数
<input 
  onKeyPress={(e) => this.onHitEnter(e, item, item.id, item.index)} 
/>

// 方法定义保持你原来的写法即可
onHitEnter = (e, item, id, index) => {
  if (e.key === 'Enter') {
    console.log('按下回车键！', item, id, index);
  }
}

小提示 #

如果是在列表循环里渲染输入组件，这两种写法每次render都会创建新的函数，可能会有轻微的性能影响。如果追求最优性能，可以考虑：

• 在组件的constructor里提前绑定方法（不过class fields的箭头函数写法已经很方便了）
• 把相关参数封装成一个对象传递，减少参数数量

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