React的onChange事件如何同时传递event对象与自定义参数

你当前的写法存在两个核心问题：

• 直接在onChange后写函数执行语句onCheckedValue(notification, event)，会在组件渲染阶段就立刻执行该函数，而非等待Checkbox的change事件触发后才调用
• 语句里的event并不是Checkbox事件触发时传递的事件对象，会直接触发未定义报错

方案1：箭头函数包裹（最常用） #

在onChange绑定处写一个内联箭头函数，接收组件抛出的事件对象，再将自定义参数和事件对象一起传入目标处理函数即可，不需要修改你原有事件处理函数的定义：

<Checkbox
  checked={notification.is_selected}
  onChange={(event) => onCheckedValue(notification, event)}
  value={notification}
/>

这个写法逻辑直观，绝大多数业务场景直接用这个方案就可以。

方案2：柯里化封装（适合需要避免重复创建内联函数的场景） #

如果你担心内联箭头函数在每次组件渲染时重新创建影响性能，可以把事件处理函数改造成柯里化形式，先接收自定义参数，再返回真正响应事件的处理函数：

// 改造原有事件处理函数
const onCheckedValue = (notification) => (event) => {
  console.log('notification', notification);
  console.log('event', event);
};

// 事件绑定时直接传入自定义参数即可
<Checkbox
  checked={notification.is_selected}
  onChange={onCheckedValue(notification)}
  value={notification}
/>

注意：普通业务场景下两种写法的性能差异几乎可以忽略，不用刻意为了优化选择柯里化写法，优先保证代码可读性即可。

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