react事件如何传递参数

在React中传递事件参数的常见方法

使用箭头函数绑定参数
通过箭头函数在事件处理时传递参数，避免直接调用函数导致立即执行：

<button onClick={(e) => this.handleClick(id, e)}>Click</button>

e代表React合成事件对象，会自动作为最后一个参数传递。

通过bind方法预先绑定参数
利用Function.prototype.bind创建新函数，固定部分参数：

<button onClick={this.handleClick.bind(this, id)}>Click</button>

第一个参数通常绑定this，后续参数会作为handleClick的前置参数。

自定义属性结合事件对象
通过dataset或自定义属性获取参数：

<button data-id={id} onClick={this.handleClick}>Click</button>

// 事件处理函数中
handleClick = (e) => {
  const id = e.target.dataset.id;
};

高阶函数封装
创建返回事件处理函数的工厂方法：

handleClickWithParam = (param) => (e) => {
  console.log(param, e);
};

<button onClick={this.handleClickWithParam(id)}>Click</button>

性能优化建议

对于列表渲染的场景，应在构造函数或组件外部提前绑定参数，避免每次渲染创建新函数：

constructor() {
  this.handleClick = this.handleClick.bind(this);
  this.presetHandler = this.handleClickWithParam(fixedParam);
}

注意事项

• 箭头函数和bind都会创建新函数，可能影响性能优化（如shouldComponentUpdate）
• 合成事件（SyntheticEvent）会被池化，异步访问需调用e.persist()
• 参数传递顺序需保持一致，事件对象通常作为最后一个参数