react事件如何传递参数
在 React 中传递事件参数的常见方法
1. 使用箭头函数绑定参数
通过箭头函数在事件处理中直接传递参数，避免立即调用函数。
<button onClick={(e) => handleClick(id, e)}>Click</button>e 是事件对象，id 是自定义参数。
2. 通过 bind 方法传递参数
利用 Function.prototype.bind 预绑定参数，事件对象会作为最后一个参数传递。
<button onClick={handleClick.bind(null, id)}>Click</button>handleClick 函数需定义为：
function handleClick(id, e) {
console.log(id, e);
}3. 自定义数据属性（Data Attributes）
通过 dataset 传递参数，适用于简单场景。
<button data-id={id} onClick={handleClick}>Click</button>事件处理函数中通过 e.target.dataset.id 获取参数。
4. 使用高阶组件或自定义 Hook
封装逻辑复用参数传递，例如通过 Context 或自定义 Hook 管理参数。
const useClickHandler = (id) => {
return (e) => {
console.log(id, e);
};
};
function Component() {
const handleClick = useClickHandler(123);
return <button onClick={handleClick}>Click</button>;
}注意事项
- 事件对象：若需同时传递参数和事件对象，确保事件对象不被覆盖。
- 性能优化：避免在渲染中创建箭头函数（如使用
useCallback缓存处理函数）。 - 参数类型：复杂对象建议通过状态管理（如 Redux）或 Context 传递。
