react事件如何传值

在React中传递事件参数

React中事件处理函数可以通过多种方式传递参数，常见方法包括使用箭头函数或bind方法。

使用箭头函数传递参数

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

箭头函数自动绑定this，可以直接在调用时传递参数。事件对象e作为最后一个参数传递。

使用bind方法传递参数

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

bind方法第一个参数是this上下文，后续参数会作为handleClick的前置参数。事件对象e会自动作为最后一个参数传递。

事件处理函数接收参数

处理函数需要按照参数传递顺序接收：

handleClick = (id, e) => {
  console.log(id, e.target);
}

高阶函数传递参数

可以通过返回函数的方式传递参数：

handleClick = (id) => (e) => {
  console.log(id, e.target);
}

// 使用时
<button onClick={this.handleClick(id)}>Click</button>

通过data属性传递

也可以使用HTML5的data-*属性：

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

handleClick = (e) => {
  const id = e.target.dataset.id;
  console.log(id);
}

类组件与函数组件差异

函数组件中可以直接在props中接收事件处理函数，传递方式相同：

function MyComponent({ onClick }) {
  return <button onClick={(e) => onClick(id, e)}>Click</button>;
}