react事件如何传递参数
在React中传递事件参数的方法
使用箭头函数包裹事件处理器
通过箭头函数可以在调用事件处理器时传递自定义参数。这种方式不会自动传递事件对象（event），但可以手动传递。
<button onClick={(e) => handleClick(id, e)}>Click</button>handleClick函数接收两个参数：自定义的id和React事件对象e。
使用bind方法
通过Function.prototype.bind可以预先绑定参数，第一个参数为this（通常设为null），后续参数会作为前置参数传递给原函数。
<button onClick={handleClick.bind(null, id)}>Click</button>事件对象e会作为绑定参数之后的最后一个参数传递给handleClick。
通过data-attributes传递
DOM元素可以通过data-*属性存储数据，在事件处理中通过event.target.dataset获取。
<button data-id={id} onClick={handleClick}>Click</button>
function handleClick(e) {
const id = e.target.dataset.id;
}在高阶组件中传递
如果使用高阶组件（HOC）或自定义Hook，可以通过闭包或Context等方式传递参数。
const withClickHandler = (Component) => (props) => {
const handleClick = (id) => (e) => {
console.log(id, e);
};
return <Component {...props} onClick={handleClick} />;
};注意事项
- 使用箭头函数或
bind时，每次渲染都会创建新函数，可能影响性能优化（如React.memo）。 - 需要事件对象时，必须显式传递
e参数。 - 对于列表渲染的场景，通常需要传递项目ID作为参数，确保能识别具体项。
