事件

用 onClick、onChange 接收使用者的操作

重點

點擊用 onClick、輸入用 onChange 來接收。和 HTML 的 onclick 不同，第二個單字的開頭要大寫
傳入的是「之後才執行的函式」。寫成 onClick={handleClick}，不要加 ()
想帶參數呼叫時，用 () => 包起來：onClick={() => setCount(0)}

動手試試

import { useState } from "react"

export default function App() {
  const [message, setMessage] = useState("還沒有點擊")

  function handleClick() {
    setMessage("已點擊！")
  }

  return (
    <div style={{ padding: 16 }}>
      <button onClick={handleClick}>點我</button>
      <p>{message}</p>
    </div>
  )
}

Open Sandbox

加一個「復原」按鈕，把訊息改回一開始的內容
把 onClick 改成 onMouseEnter，讓滑鼠移上去就有反應
試試看寫成 onClick={handleClick()}，加上 () 會怎樣

常見錯誤

onClick={handleClick()} 會在顯示的那一刻就執行

加上 () 傳進去的是「現在立刻執行的結果」。應該寫 onClick={handleClick}，傳入函式本身。

事件用的函式以 handle ＋動作來命名

像 handleClick、handleSubmit、handleReset 這樣命名，一眼就看得出函式在做什麼。實務上也是標準做法。