React 将本地浏览器事件包装在一个称为 SyntheticEvent 的跨浏览器对象中，并在应用程序的根处使用单个侦听器将事件分派给您的处理程序（事件委托）。您只需将处理程序作为 props 连接即可。
jsx
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick、onChange、onSubmit）并采用函数，而非字符串（onClick={handleClick}，不是 onClick="handleClick()"）。e.preventDefault()、e.stopPropagation()、e.target。不要在渲染时调用函数——将其包装起来以便在事件上运行，而不是立即运行：
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
第二行在构建 JSX 时（每次渲染）调用 remove(id)，这几乎从不是您想要的。
对于表单，优先选择 <form> 上的 onSubmit（带 preventDefault）而非按钮上的 onClick，这样 Enter 键也能工作。