什麼是事件處理？
React 透過 SyntheticEvent 系統封裝了瀏覽器的原生事件，提供跨瀏覽器一致的互動介面。它是網頁應用程式回應使用者操作（如點擊、輸入、送出表單）的核心機制。
事件處理基礎語法
- React 事件屬性採用駝峰式命名，例如 onClick 而非 HTML 的 onclick。
- 必須傳遞函式定義 func，而非函式執行結果
func()，否則會在渲染時直接觸發。 - 事件處理函式會接收一個 e 參數，這是 React 封裝過的物件，具備與原生 DOM 事件相同的屬性（如
e.target）。 - 若需傳遞額外參數，通常使用箭頭函式包裹，例如
() => handleClick(id)。
常見錯誤與解決方法
1. 立即執行錯誤：寫成onClick={handleClick()} 導致元件一渲染就執行，建議改為 onClick={handleClick}。2. 狀態更新不同步：建議在需要依賴舊值時使用 setCount(prev => prev + 1) 的函式寫法。
import { useState } from 'react';
export default function CounterApp() {
// 定義計數器狀態，預設值為 0
const [count, setCount] = useState(0);
// 定義基礎點擊處理函式
const handleAdd = () => {
// 使用回呼函式確保取得最新的 state 值進行更新
setCount((prev) => prev + 1);
};
// 定義帶有參數的處理函式
const handleAlert = (message) => {
// 彈出瀏覽器警告視窗顯示訊息
alert(`系統訊息: ${message}`);
};
// 定義表單提交處理函式
const handleSubmit = (e) => {
e.preventDefault(); // 阻止表單預設的頁面重整行為
console.log("表單已送出"); // 在控制台印出訊息
};
return (
<div style={{ padding: '20px' }}>
{/* 顯示當前計數值 */}
<h1>目前計數: {count}</h1>
{/* 綁定基礎點擊事件，注意這裡是傳入函式本身 */}
<button onClick={handleAdd}>增加數字</button>
{/* 綁定帶參數的事件，使用箭頭函式包裹以避免立即執行 */}
<button onClick={() => handleAlert('操作成功！')}>
顯示訊息
</button>
{/* 表單事件範例 */}
<form onSubmit={handleSubmit} style={{ marginTop: '10px' }}>
<button type="submit">送出表單</button>
</form>
</div>
);
}
