Event Parameters 事件参数
最后更新：2026-10-28
Event Parameters 事件参数
事件处理函数能拿到事件对象 e，从中读取 target.value、key 等信息。需要额外传参时用箭头函数包裹：onClick={() => fn(id)}，避免写成 fn(id) 导致渲染时就执行。
| 分组 | 渲染与状态 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
onChange={(e) => setName(e.target.value)} // e：事件对象
onClick={() => remove(id)} // 额外传参：箭头函数包一层
onClick={(e) => remove(id, e)} // 参数和事件对象都要⚙️ 参数
| e（事件对象） | React 合成事件对象；常用 e.target.value 读取输入值、e.type 判断事件类型。 |
|---|
返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
三个颜色方块按钮，点击后下方依次记录「选中 #xxxxxx（事件类型：click）」，最新记录排在最前，最多显示三条——演示给事件处理器传自定义参数。💡 要点
💡 提示 传参写 () => fn(x)，直接写 fn(x) 会在渲染时就执行——这是事件传参最常见的 bug。
ℹ️ 说明 最常读的属性是 e.target.value（输入框当前值）和 e.key（键盘事件按了哪个键）。
ℹ️ 说明 React 17 起事件对象不再做池化，可以放心保存或异步读取，无需再调用 e.persist()。
🏷️ 渲染与状态相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 怎么给 onClick 传参数？
A 用箭头函数包一层：onClick={() => remove(id)}；还需要事件对象就写成 onClick={(e) => remove(id, e)}。
Q 事件对象 e 里常用哪些属性？
A e.target（触发元素，常配合 .value 读输入）、e.type（事件类型）、e.key（键盘按键）、e.clientX/Y（鼠标位置）。
Q 箭头函数传参和 bind 传参哪个好？
A 现代代码统一用箭头函数，直观且好读；bind 是老写法，效果相同但可读性差，新项目没必要再用。
