---
tags: 2023 React 入門攻略工作坊
---
繼續昨天的 useState 練習，今天要練習的是物件資料，這樣的用法很常被用在 input 練習上，先來看個範例。
舉例來說：

const [userData, setUserData] = React.useState({
  account: '',
  password: '',
})

---
那在 input 上就會這樣綁定資料。

<input name="account" value={userData.account} onChange={handleChange} />

- name 為設定和 userData 資料內定義相同的物件 key 值。
- value 為動態綁定 userData 的 account 值。
- onChange 事件動態綁定 handleChange 函式。
---
因為表單中會有多個 input，所以我們可以透過函式取得 event 參數來統一更新資料的行為，例如：

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 看到輸入的值。

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

<!-- 解答：

練習一：
<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);
};

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/gbYxEmq) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/RNbypmB?editors=1011) |
| 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/ZYzoKJe) |
| 4 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/ogvdWpP) |
| 5 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/jENxmZr?editors=1011) |
| 6 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/qEWYmvQ) |
|7|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/qEWYmwQ?editors=1011)|
|8| tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/yyBjXLP?editors=0011) |
|9| 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/mybLwbd) |
| 10 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/dPbeRyE?editors=0011) |
| 11 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/JoPvJqo) |
| 12 | Clove | [Codepen](https://codesandbox.io/p/sandbox/wmzznm) |
| 13 | Toung | [Codepen](https://codepen.io/Toung/pen/vEBjmWb) |
| 14 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/ByBxdZP) |
| 15 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/MYgGvZw) |
| 16 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/JoPvMdY) |
| 17 | Amanda | [Codepen](https://codepen.io/cym199922/pen/jENxZdy) |
| 18 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/pvzVKey) |
| 19 |邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/RNbyMRN?editors=1011)|
| 20 |Johnson|[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/raBvmpz)|
| 21 |蘑菇星星|[CodePen](https://codepen.io/brrrieon-the-vuer/pen/JoPvQqP?editors=0011)|
| 22 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/JoPZPKr) |
| 23 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/azoKdLv?editors=1011) |
| 24 | GAVI| [CodePen](https://codepen.io/qbafldcv-the-scripter/pen/xbKjeKx?editors=1011)|
| 25 | 泊岸| [CodePen](https://codepen.io/qoq77416416/pen/gbYjeby?editors=1011)|
| 26 | user | [Codepen](https://codepen.io/fabio7621/pen/ogvPGRo?editors=1011) |
| 27 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/LEPJeRo?editors=0010) |
| 28 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/azoKdLv) |
| 29 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/dPbgOvp?editors=0011) |
| 30 | kun._c8_shake_it | [Codepen](https://codepen.io/barry91205/pen/jEOEmQK?editors=1011) |
| 31 | jinliu214| [Codepen](https://codepen.io/jinliu214/pen/VYwLzYy?editors=0011) |
| 32 | yun-lin | [Codepen](https://codepen.io/yunlinhsu/pen/vEYLKaX?editors=1011) |
| 33 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/MYWyMYm?editors=1011) |
| 34 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/LEYRWeY?editors=1011) |
| 35 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/QwWvGPm) |
| 36 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/ZYEKdzq?editors=1011) |
| 37 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/RNwBKZK?editors=1111) |
| 38 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/PwoVpxp?editors=1011) |
| 39 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/OPMNLbm) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |