系列回顧：
在前幾篇文章中，我們已經學會了如何使用 State 管理組件的內部數據，以及如何通過 Props 實現父子組件之間的通信。我們的組件現在已經有了“數據”和“外觀”。但是，它還像一個只能看的“模型”，無法與用戶進行互動。用戶點擊了按鈕，頁面卻毫無反應，這可不行！

歡迎來到React學習的第四站！

今天，我們的目標非常簡單直接：讓我們的React組件能夠“聽懂”用戶的操作，比如鼠標點擊、鍵盤輸入等。我們將以最常見的“按鈕點擊”為例，來學習React中的事件處理 (Event Handling)。

React事件處理的兩個小規則

在React中給元素綁定事件，和在原生HTML中非常相似，但有兩個主要區別，記住它們就行：

1. 事件名使用駝峰命名法 (camelCase)。

   • 在HTML中是 onclick。
   • 在React中是 onClick。
   • 同理，onchange 變成 onChange，onsubmit 變成 onSubmit。

2. 事件處理函數需要用花括號 {} 包起來，傳遞的是一個函數本身，而不是函數調用的結果。

   • HTML中是：<button onclick="handleClick()"> (傳遞字符串)
   • React中是：<button onClick={handleClick}> (傳遞函數引用)

理解了這兩點，你已經掌握了React事件處理的80%！

---

實戰一：一個會打招呼的按鈕

讓我們從一個最簡單的例子開始：點擊一個按鈕，在瀏覽器的控制臺打印出 “Hello, React!”。

第一步：準備 App.jsx

老規矩，我們先清空 src/App.jsx 文件，寫入一個基礎的架子：

import './App.css';function App() {// 1. 在組件內部定義一個事件處理函數const sayHello = () => {console.log('Hello, React!');};return (<div><h1>React 事件處理入門</h1>{/* 2. 使用 onClick 將函數綁定到按鈕上 */}<button onClick={sayHello}>點我打個招呼</button></div>);
}export default App;

代碼解釋：

1. 我們定義了一個名為 sayHello 的箭頭函數。這個函數就是我們的事件處理函數 (Event Handler)，它負責執行點擊后需要做的事情。
2. 在 <button> 元素上，我們使用了 onClick={sayHello}。注意，這里傳遞的是 sayHello 這個函數本身，后面沒有加小括號 ()。如果你寫成了 onClick={sayHello()}，那么在組件渲染的時候這個函數就會被立即執行，而不是等到點擊時才執行，這是初學者最容易犯的錯誤之一。

第二步：測試效果

保存文件，打開瀏覽器。

1. 按 F12 鍵（或右鍵 -> 檢查）打開開發者工具，并切換到 Console (控制臺) 面板。
2. 現在，點擊頁面上的“點我打個招呼”按鈕。
3. 看看控制臺，是不是打印出了 “Hello, React!”？

太棒了！你已經成功綁定了第一個React事件。

---

實戰二：事件處理與State的結合

光在控制臺打印信息還不夠好玩。事件處理最強大的地方在于，它可以和我們之前學的 State 結合起來，去改變頁面的內容。

讓我們把第二篇的計數器案例，用更規范的事件處理函數方式來重寫一遍。

修改 App.jsx:

import { useState } from 'react'; // 別忘了引入 useState
import './App.css';function App() {// 使用 useState 創建一個 state 變量 countconst [count, setCount] = useState(0);// 定義增加計數的事件處理函數const handleIncrease = () => {setCount(count + 1);};// 定義減少計數的事件處理函數const handleDecrease = () => {setCount(count - 1);};return (<div><h1>事件與State結合的計數器</h1><h2>當前計數值: {count}</h2><button onClick={handleIncrease}>增加 +1</button><button onClick={handleDecrease}>減少 -1</button></div>);
}export default App;

代碼解釋：

• 我們創建了兩個事件處理函數 handleIncrease 和 handleDecrease。
• 它們分別在被調用時，通過 setCount 函數去更新 count 這個State。
• 當State更新后，React會自動重新渲染組件，頁面上的 {count} 就會顯示出最新的值。

現在，你的計數器不僅可以增加，還可以減少了！這證明了事件處理與State是驅動React應用交互的核心動力。

---

進階：如何在事件處理函數中傳遞參數？

有時候，我們需要在觸發事件時，給處理函數傳遞一些額外的信息。比如，我們想讓一個按鈕點擊后，計數器不是+1，而是+5。

直接寫 onClick={handleIncrease(5)} 是錯誤的，因為它會導致函數在渲染時就執行。正確的做法是使用一個箭頭函數來包裹我們的調用。

修改 App.jsx:

import { useState } from 'react';
import './App.css';function App() {const [count, setCount] = useState(0);// 修改事件處理函數，讓它能接收一個參數const changeCount = (amount) => {setCount(count + amount);};return (<div><h1>帶參數的事件處理</h1><h2>當前計數值: {count}</h2>{/* 使用箭頭函數來傳遞參數 */}<button onClick={() => changeCount(1)}>增加 +1</button><button onClick={() => changeCount(-1)}>減少 -1</button><button onClick={() => changeCount(5)}>直接 +5</button></div>);
}export default App;

代碼解釋：

• onClick={() => changeCount(5)}：我們傳遞給 onClick 的是一個新的、匿名的箭頭函數 () => changeCount(5)。
• 這個匿名函數本身并不會被立即執行。
• 只有當按鈕被點擊時，這個匿名函數才會被調用，然后它再去執行內部的 changeCount(5)。

這樣，我們就巧妙地實現了在事件觸發時傳遞自定義參數的目的。

---

總結與思考

今天，我們為應用裝上了“耳朵”，讓它能夠響應用戶的操作。核心知識點回顧：

1. React事件命名規則： 使用駝峰命名法，如 onClick, onChange。
2. 綁定事件處理函數： 使用花括號{}，傳遞函數本身，如 onClick={myFunction}。
3. 事件處理與State結合： 在事件處理函數中調用 setState 函數，是實現UI交互更新的核心模式。
4. 傳遞參數： 使用匿名箭頭函數包裹，如 onClick={() => myFunction(myArgument)}。

我們已經掌握了單個組件的交互邏輯。在實際開發中，我們常常需要根據一堆數據來生成一長串的列表，比如一個商品列表、一個朋友列表。手動一個一個寫組件肯定是不現實的。

在下一篇文章 《React動態渲染：如何用map循環渲染一個列表(List)？》 中，我們將學習如何利用JavaScript的數組方法，根據數據動態地、批量地創建組件，這是構建數據驅動應用的關鍵一步。我們下期再會！