建立 2026-09-15 更新 2026-09-15

事件

React 用 onClick、onChange、onSubmit 這類 camelCase 屬性綁事件。值必須是函式，不是呼叫結果。

傳函式，不要立刻執行

<button type="button" onClick={handleClick}>
  儲存
</button>

寫成 onClick={handleClick()} 會在渲染時就跑，通常不是你要的。需要傳參數時包一層：

<button type="button" onClick={() => deleteItem(id)}>
  刪除
</button>

常見事件

屬性	何時觸發	典型用途
`onClick`	點擊	按鈕、清單列
`onChange`	輸入值改變	文字欄、checkbox
`onSubmit`	表單送出	攔截後 `preventDefault`
`onKeyDown`	按下鍵盤	快捷鍵、Escape 關閉

事件物件是 React 的合成事件，用法接近原生：event.target.value、event.preventDefault()。

function SearchBox() {
  const [query, setQuery] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    console.log("搜尋", query);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="關鍵字"
      />
      <button type="submit">搜尋</button>
    </form>
  );
}

value 加上 onChange 就是受控元件（controlled component）：輸入框顯示的永遠是 state。不要混用「不管控的 defaultValue」除非你清楚自己在做非受控表單。

不要在 JSX 裡做太重的事

事件處理函式裡再 setState、呼叫 API。JSX 只負責「發生時呼叫誰」。複雜邏輯抽成具名函式，除錯比較容易。

官方對照：Responding to Events。接著練習條件與列表。