事件处理与合成事件
React 事件写法是 onClick={handleClick}：驼峰命名、传函数而非字符串。事件对象是“合成事件（SyntheticEvent）”：React 把浏览器原生事件包装成统一接口，因此不用关心 IE 与老 Safari 的差异。
合成事件用完即回收：想异步读取 e.target.value 必须先取出来或用 e.persist()。阻止默认行为用 e.preventDefault()（如阻止表单提交后页面跳转）。
- 驼峰 + 传函数：onClick={() => ...}，不是 onclick="..."
- 合成事件抹平浏览器差异，接口与原生事件一致
- 事件池机制：异步读取事件属性前先取值或 e.persist()
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>事件处理</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState } = React; function App() { const [msg, setMsg] = useState(''); // 事件处理函数接收合成事件对象 function handleClick(e) { e.preventDefault(); // 阻止默认行为 setMsg('点击于 ' + new Date().toLocaleTimeString('zh-CN')); console.log('事件类型:', e.type); // click } function handleChange(e) { setMsg('输入：' + e.target.value); // 同步读，没问题 } function asyncRead(e) { const value = e.target.value; // 先取出来再用 setTimeout(() => console.log('异步读到的值:', value), 500); } return ( <div style={{ padding: 16 }}> <a href="https://react.dev" onClick={handleClick}>点我（已阻止跳转）</a> <p>{msg}</p> <input placeholder="同步读" onChange={handleChange} /> <input placeholder="异步读" onBlur={asyncRead} /> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App />); </script> </body> </html>
本节要点事件 = 驼峰属性 + 传函数；合成事件统一浏览器差异，异步读取先取值。
