React 中最常見的兩個需求，一個是列表渲染，另一個就是綁定點擊事件。
這一篇就是從最基礎的按鈕點擊開始，分四個階段，逐步理解 React 中事件的寫法和參數傳遞方式。

---

📍階段一：最簡單的點擊事件

function App() {const handleClick = () => {console.log('button 被點擊了')}return (<div className="App"><button onClick={handleClick}>click me</button></div>)
}

解釋：

• 這里的 onClick 就是標準的 JSX 寫法。
• 它接收一個函數引用，handleClick 就是點擊時要執行的邏輯。
• 注意：不能直接寫 handleClick()，否則是頁面加載時就執行了，而不是等用戶點擊才執行。

---

📍階段二：獲取事件對象 e

const handleClick = (e) => {console.log('button 被點擊了', e)
}

解釋：

• React 會把合成事件對象作為第一個參數傳給事件處理函數。
• 雖然它看起來像原生事件，其實是 React 做了一層封裝，叫 SyntheticEvent。
• 常見屬性（如 e.target、e.type）都能用。

---

📍階段三：傳遞自定義參數

const handleClick = (name) => {console.log('button 被點擊了', name)
}<button onClick={() => handleClick('jack')}>click me</button>

解釋：

• 如果想給事件函數傳參數，那就要用箭頭函數包一層。
• 這里 handleClick('jack') 是傳參形式，但要注意這樣每次渲染都會生成一個新函數。
• 所以不要在大列表里濫用（比如 list.map 時）。

---

📍階段四：既傳參，又保留事件對象 e

const handleClick = (name, e) => {console.log('button 被點擊了', name, e)
}<button onClick={(e) => handleClick('jack', e)}>click me</button>

解釋：

• 想要兩個參數：一個是自定義的，另一個是系統傳的 e，就得手動寫出來。
• 順序不能反，因為 React 默認把事件作為第一個參數。
• 所以我們得用箭頭函數先拿到 e，再把 name 和 e 一起傳給 handleClick。

---

? 總結（寫給自己的話）

1. React 的事件是合成事件，不是原生 DOM 的 onclick，但基本用法類似。
2. 如果直接寫函數名，就是傳引用；想要傳參數就要用箭頭函數包裝。
3. 想要拿到事件對象 e，要么寫 (e) => ...，要么作為 handleClick(e) 的參數顯式聲明。
4. JSX 里不能直接調用函數（比如 onClick={handleClick()}），這樣會直接執行，而不是綁定。

---

這一塊內容寫得越清楚越好，因為幾乎所有交互邏輯都繞不開事件系統。寫組件的時候，判斷點擊了誰、傳了什么、觸發了什么，最后全都繞回這個函數定義上。

后續我可能會再整理：

• 事件冒泡和阻止傳播
• React 如何模擬事件池
• 在組件中統一封裝多個事件處理邏輯

這一篇算是打基礎，理解透之后，用起來會非常自然。