---
# System prepended metadata

title: "\U0001F3C5Day22 - React 基礎練習 (7) - useState 進階練習"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day22 - React 基礎練習 (7) - useState 進階練習

繼續昨天的 useState 練習，今天要練習的是物件資料，這樣的用法很常被用在 input 練習上，先來看個範例。
舉例來說：
```jsx=
const [userData, setUserData] = React.useState({
  account: '',
  password: '',
})
```
---
那在 input 上就會這樣綁定資料。
```jsx=
<input name="account" value={userData.account} onChange={handleChange} />
```
- name 為設定和 userData 資料內定義相同的物件 key 值。
- value 為動態綁定 userData 的 account 值。
- onChange 事件動態綁定 handleChange 函式。
---
因為表單中會有多個 input，所以我們可以透過函式取得 event 參數來統一更新資料的行為，例如：
```jsx=
const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData((state) => ({...state, [name]:value}))
}
```
因為使用 `setUserData` 會直接更新 `userData` 資料，所以運用在多個 input 的整合來說，我們需要保持其他資料的內容，只更新我們要更新的對象。

因此透過函式參數的 `state` 先將原始資料取出，再透過物件展開 `...state` 將物件中的原始資料加入，最後的 `[name]:value` 則更新對應的 key 和值。

回到 input 元素來看，就是更新 `userData` 中的 `account`，而 value 是 `e.target.value` 也就是輸入的值。

文件參考：
[<input>](https://react.dev/reference/react-dom/components/input)

補充：
[`<select>`](https://react.dev/reference/react-dom/components/select)
[`<textarea>`](https://react.dev/reference/react-dom/components/textarea)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/eYqjRZY?editors=1011)，並撰寫內容，完成帳號密碼的表單製作，並在點選送出按鈕後，可以在 console 看到輸入的值。


<!-- 解答： 

```
練習一：
<div>
  <label htmlFor="account">帳號</label>
  <input id="account" name="account" value={userData.account} onChange={handleChange} />
</div>
<div>
  <label htmlFor="password">密碼</label>
  <input id="password" name="password" value={userData.password} onChange={handleChange} />
</div>

const [userData, setUserData] = React.useState({
  account: '',
  password: '',
});
const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData((state) => ({...state, [name]:value}))
}

練習二：
<div>
  <select value={selectedOption} onChange={handleSelectChange}>
    <option value="">請選擇</option>
    <option value="option1">選項 1</option>
    <option value="option2">選項 2</option>
    <option value="option3">選項 3</option>
  </select>
  你選擇了: <strong>{selectedOption}</strong>
</div>

const [selectedOption, setSelectedOption] = React.useState("");
const handleSelectChange = (event) => {
  setSelectedOption(event.target.value);
};

```
-->



| yaaaa       | codepen                                                                      |
| ----------- | ---------------------------------------------------------------------------- |
| Miikaa      | [codepen](https://codepen.io/Miikaa/pen/xbOOxEe)                             |
| 老屠        | [codepen](https://codepen.io/fsgfxvlb-the-selector/pen/ZYOpdgM?editors=1011) |
| Jin         | [codepen](https://codepen.io/Jin-L/pen/VYjmvEZ)                              |
| Zem         | [codepen](https://codepen.io/dgldwqlg-the-vuer/pen/dPXOYEy)                  |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/VYjmvxo)                   |
| 地瓜        | [codepen](https://codepen.io/ChippyYU/pen/JoKbGKP?editors=1111)              |
| cks40660    | [codepen](https://codepen.io/CKS40660/pen/MYebKrL)                           |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/EayNPGj?editors=1011)               |
| Marco       | [CodePen](https://codepen.io/MarcoChiu/pen/yyJVeRr)                          |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/LEZbGMR)                              |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/VYjmeBP)              |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/raLWLWp?editors=0011)              |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=JoKbKMe)                           |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/PwzbNLv)                           |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/MYebjyq)                          |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/LEZbxma?editors=0010)           |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/myEOWXm)                            |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/GgqNWqN)                  |
| cindy       | [Codepen](https://codepen.io/a50134/pen/myEOmVx?editors=0011)                |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/ogLYWpp?editors=0011)              |
| FangFang    | [Codepen](https://codepen.io/Fang-the-selector/pen/Wbxoprd?editors=1011)     |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/vEKymWj?editors=1011)            |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/Eaygrpv?editors=1111)              |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/wBWoerG)                            |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/qENqjpL?editors=0011) |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/azZBwzq?editors=0011) |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/vEKyZQY)                           |
| Leonard     | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ZYOBJBm?editors=0011)     |
| wind        | [Codepen](https://codepen.io/wind7y/pen/JoKbOaw)                             |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/KwMNdeX?editors=1011)           |
| 叮咚        | [Codepen](https://codepen.io/pinchieh-lin/pen/QwEGBZv?editors=1011)          |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/XJKNxxp?editors=1011)              |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/MYebxBO?editors=1011)  |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/xbOqLwa)                            |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/VYjWOLJ)                            |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/ByzdKgw)              |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/zxBdKZw)                           |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/GgqvMBq?editors=0011)             |
| TWLeoC      | [Codepan](https://codepen.io/TWLeoC/pen/jErLveW?editors=1011)                |
| Wen         | [Codepen](https://codepen.io/hsiao-kevin/pen/LEZeWxN)                        |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/JoKLONL)                          | 