React 中事件处理（合成事件）如何工作？

React 将本地浏览器事件包装在一个称为 SyntheticEvent 的跨浏览器对象中，并在应用程序的根处使用单个侦听器将事件分派给您的处理程序（事件委托）。您只需将处理程序作为 props 连接即可。

<button onClick={e => { e.preventDefault(); save(); }}>Save</button>

关键要点

• 处理程序是 camelCase props（onClick、onChange、onSubmit）并采用，而非字符串（，不是 ）。​

传递参数

不要在渲染时调用函数——将其包装起来以便在事件上运行，而不是立即运行：

<button onClick={() => remove(id)}>Delete</button>   // ✅ runs on click
<button onClick={remove(id)}>Delete</button>          // ❌ runs during render!

第二行在构建 JSX 时（每次渲染）调用 remove(id)，这几乎从不是您想要的。

React 为什么这样做

• 一个根侦听器而不是数千个单独的 DOM 侦听器→更少的内存和一致的行为。
• 跨浏览器规范化以便您不必编写特定于浏览器的代码。

对于表单，优先选择 <form> 上的 onSubmit（带 preventDefault）而非按钮上的 onClick，这样 Enter 键也能工作。