30天用React打造AI工具箱 Day7

今天要學的「事件處理」是React最常用的功能之一，讓畫面不只是靜態顯示，而能根據使用者操作做出反應。

基本語法

React的事件處理和HTML有點像，但有幾個重點：

• React事件名稱採用駝峰式（onClick、onChange）。
• 事件處理器是函式，不是字串。

例如：點擊按鈕顯示訊息

export default function HelloButton(){
  function sayHello(){
    alert("哈囉，React！")
  }

  return (
    <button
      className="px-4 py-2 rounded bg-green-600 text-white"
      onClick={sayHello}
    >
      點我打招呼
    </button>
  )
}

這樣就可以在點擊這個button後可以輸出"哈囉，React！"的訊息

傳參數的方式

有時候事件需要知道是哪一個項目觸發，這時可以用箭頭函式傳參數。

export default function Greet({ name }){
  const sayHi = (user)=>{
    alert(`Hi, ${user}!`)
  }

  return (
    <button
      className="px-3 py-2 bg-blue-600 text-white rounded"
      onClick={()=>sayHi(name)}
    >
      打招呼給{name}
    </button>
  )
}

##常用的事件

• onClick：按鈕點擊
• onChange：輸入框/下拉選單變更
• onSubmit：表單送出
• onMouseEnter / onMouseLeave：滑鼠移入/移出
• onKeyDown：鍵盤輸入

範例：輸入框即時更新

import { useState } from 'react'

export default function InputDemo(){
  const [text,setText] = useState("")

  return (
    <div className="p-6 space-y-3">
      <input
        className="border rounded px-3 py-2 w-full"
        placeholder="輸入一些文字"
        value={text}
        onChange={e=>setText(e.target.value)}
      />
      <p>你輸入的是：{text}</p>
    </div>
  )
}

事件處理是React互動的核心。到這裡，已經可以做到：

• 點擊按鈕觸發動作
• 使用者輸入文字即時顯示
• 根據不同狀況決定要呼叫哪個函式

這些能力將是之後做AI工具的基礎。