在 React 的 JSX 中，事件處理主要有以下規則： - 事件名稱使用 **camelCase**，例如 `onClick`、`onChange`、`onSubmit`。 - 傳入事件處理函式，而不是立即呼叫函式： ```jsx onClick={handleClick} // 正確 onClick={handleClick()} // 會在元件渲染時立即執行 ``` - 事件處理函式可以接收事件物件 `event`。 - 若不需要修改畫面內容，就不必使用 `useState`。 ## 範例一：按鈕點擊事件 此元件按下按鈕時只在主控台輸出訊息，不改變任何狀態或畫面。 ```jsx function LogButton() { function handleClick(event) { console.log("按鈕被點擊了"); console.log("事件類型：", event.type); } return ( <button onClick={handleClick}> 點擊按鈕 </button> ); } export default LogButton; ``` 重點： ```jsx <button onClick={handleClick}> ``` 表示使用者點擊按鈕時，React 會呼叫 `handleClick`。 --- ## 範例二：表單送出事件 此元件攔截表單送出行為，避免瀏覽器重新整理頁面，並在主控台輸出訊息。它沒有使用狀態，因此不會更新畫面內容。 ```jsx function SimpleForm() { function handleSubmit(event) { event.preventDefault(); console.log("表單已送出"); } return ( <form onSubmit={handleSubmit}> <label htmlFor="email"> 電子郵件： </label> <input id="email" type="email" name="email" /> <button type="submit"> 送出 </button> </form> ); } export default SimpleForm; ``` 其中： ```jsx event.preventDefault(); ``` 會阻止表單的預設送出行為，例如瀏覽器重新整理或跳轉頁面；這不屬於 React 狀態變化。 這兩個範例都有事件處理，但都沒有使用 `useState`，因此事件發生後不會讓元件重新渲染或改變畫面內容。