我們使用 React 開發時，事件處理是一個關鍵的部分，因為它使得應用程序能夠響應用戶的交互。以下是對 React 事件處理的簡單介紹：

## 什麼是事件處理？
事件處理是指對用戶行為（如點擊、鍵入、滾動等）的回應。在 React 中，事件處理是通過在元素上設置事件處理器來實現的。這些事件處理器可以是函數，當指定的事件發生時，它們會被調用。

## 命名規則
在 React 中，事件使用駝峰式命名法。例如，對於點擊事件，使用 `onClick` 而不是 `onclick`。

## 事件處理函數
事件處理函數可以定義在組件內部，並通過屬性綁定到 DOM 元素上，例如：

function App() {
  const handleClick = () => {
    alert("按鈕被點擊了！");
  };

  return (
    <button onClick={handleClick}>點擊我</button>
  );
}

## 以下是常見的事件類別
1. 鼠標事件
`onClick`：當用戶單擊元素時觸發。
`onDoubleClick`：當用戶雙擊元素時觸發。
`onMouseEnter`：當鼠標進入元素邊界時觸發。
`onMouseLeave`：當鼠標離開元素邊界時觸發。
`onMouseMove`：當鼠標在元素上移動時觸發。
`onMouseDown`：當鼠標按下時觸發。
`onMouseUp`：當鼠標鬆開時觸發。

2. 鍵盤事件
`onKeyDown`：當鍵盤按鍵被按下時觸發。
`onKeyUp`：當鍵盤按鍵被鬆開時觸發。

3. 表單事件
`onChange`：當表單元素的值改變時觸發（例如，輸入框、選擇框等）。
`onFocus`：當表單元素獲得焦點時觸發。
`onBlur`：當表單元素失去焦點時觸發。
`onSubmit`：當表單被提交時觸發。

4. 觸控事件
`onTouchStart`：當用戶觸摸屏幕時觸發。
`onTouchMove`：當用戶在屏幕上滑動時觸發。
`onTouchEnd`：當用戶鬆開觸摸時觸發。

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/LYwmgPV?editors=1011)，並完成以下條件：

1. 替 `input` 欄位加上 `onChange` 的事件，當欄位值有變動時則觸發 `setEmail()` 更新值
2. 替 `input` 欄位加上 `onBlur` 的事件，當失去焦點時則觸發 `handleBlurEmail()`
3. 替 `button` 按鈕加上 `onClick` 的事件，點擊時則觸發 `handleSubmit()`

備註：
- 請利用三元運算子的方式，利用點擊按鈕時來切換文字

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

// 練習區塊
  return (
    <div>
      <h2>註冊表單</h2>
      <div>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={handleBlurEmail}
          placeholder="電子郵件"
        />
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
      <button class="mt-3 btn btn-primary" onClick={handleSubmit}>提交</button>
    </div>
  );
//區塊結束

-->

回報區
---

| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 1 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/VYZyMYJ?editors=1011)|
| 2 | MY | [Codepen](https://codepen.io/ahmomoz/pen/dPbzjPd) |
| 3 | Amanda | [Codepen](https://codepen.io/cym199922/pen/EaYQLmW) |
| 4 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/qEWxwmX) |
| 5 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/bNbLJMX) |
| 6 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/YPKeEXq) |
|7|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/ByBYEbX?editors=1011)|
| 8 | Toung | [Codepen](https://codepen.io/Toung/pen/NPKymZq)| 
| 9 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/LEPQoEJ?editors=1111) |
| 10 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/KwPQLVN?editors=1011)| 
| 11 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/zxORQda?editors=0011) |
| 12 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/MYgQdLG) |
| 13 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/bNbLXez)|
| 14 | Clove_墨 | [Codepen](https://codesandbox.io/p/sandbox/day-20-react-ji-chu-lian-xi-5-chang-jian-de-shi-jian-chu-li-ng6x9k) |
| 15 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/LEPdPQa) |
|16| 邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/NPKYWaY?editors=1111)|
|17| Noy(Toad)|[Codepen](https://codepen.io/MochiCodingPen/pen/raBdNRN) |
|18|爆漿|[Codepen](https://codepen.io/nvdwwlbx-the-vuer/pen/qEWomLv?editors=1011) |
| 19 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/bNbLJPN) |
| 20 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/vEBRZKL) |
| 21 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/JoPLZxw) |
| 22 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/XJrExNe?editors=1011) |
| 23 | GAVI| [CodePen](https://codepen.io/qbafldcv-the-scripter/pen/XJrEyxL?editors=1010)|
|24| mercury2508. |[CodePen](https://codepen.io/Mercury2508/pen/gbYzXKg)|
|25| 蘑菇星星 |[CodePen](https://codepen.io/brrrieon-the-vuer/pen/yyBjdPK?editors=1011)|
| 26 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/pvzKjeW?editors=1111) |
| 27 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/gbYKVvG?editors=1010) |
| 28 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/VYZBQdX?editors=1011) |
| 29 | Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/raBZGQe?editors=0011) |
| 30 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/dPbgdJO?editors=0011)|
| 31 | kun._c8_shake_it | [Codepen](https://codepen.io/barry91205/pen/XJWJpVX?editors=1010) |
| 32 | yaoling.liang | [Codepen]() |
| 33 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/dPyORNm?editors=0011) |
| 34 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/yyeexyV) |

---
- 快速複製格式：

| 0 | user | [Codepen]() |