Event Handling 事件处理
最后更新：2026-10-28
Event Handling 事件处理
React 用小驼峰的 onXxx 属性绑定事件（onClick、onChange 等），值为一个函数。事件触发时处理函数通常读取输入或调用 setState，让界面响应用户操作——这是交互组件的基本套路。
| 分组 | 渲染与状态 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
<button onClick={() => setCount(count + 1)}>+1</button>
// ↑ 小驼峰事件名 ↑ 传函数本身，不是调用结果⚙️ 参数
| onXxx（处理函数） | 一个接收合成事件对象的函数；内联箭头函数或组件里定义的 handleXxx 函数均可。 |
|---|
返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
显示点赞数、三个按钮、提示文字与输入框：点「点赞」数字加一，点「触发提示」显示文案，输入框打字时下方实时回显，点「重置」清空全部。💡 要点
⚠️ 注意 onClick={fn()} 会在渲染时就执行函数并把返回值当处理器——应传函数本身：onClick={fn} 或 () => fn()。
💡 提示 复杂处理函数提到组件体里命名 handleXxx；一行能写清的才用内联箭头函数。
ℹ️ 说明 React 的事件是合成事件（SyntheticEvent），统一了各浏览器差异，用法与原生事件基本一致。
🏷️ 渲染与状态相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q React 怎么绑定点击事件？
A 在元素上写 onClick={处理函数}，事件名用小驼峰；处理函数可以是组件里定义的函数，也可以是内联箭头函数。
Q onClick 为什么要写成箭头函数？
A onClick 需要一个「事件发生时才调用」的函数。写 fn() 会在渲染时立即执行；写 () => fn() 才是延迟到点击时执行。
Q React 事件和原生事件有什么区别？
A React 使用合成事件：事件名小驼峰、统一包装了原生事件对象，并挂在根节点上委托处理，兼容性与性能都更好。
