---
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/hexschool/pen/OJvjNqZ)，並撰寫內容，完成帳號密碼的表單製作，並在點選送出按鈕後，可以在 console 看到輸入的值。

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

<!-- 解答：
input

<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>

state 和 handleChange 函式

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

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-:|:---------------------- |:----------------------|
| 1 | 翔.(Ben) | [codepen](https://codepen.io/energy95272z/pen/oNQrLYm?editors=0011) |
| 2 | 大頭 | [codepen](https://codepen.io/d22495521/pen/abQgZpj?editors=1011) |
| 3 | Tami | [codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/dyQBXNr) |
| 4 | Billy.Ji | [codepen](https://codepen.io/yaj55ushydna/pen/mdQZEMd) |
| 5 | NoZ | [codepen](https://codepen.io/fgfjgror/pen/yLQdJMo?editors=0011) |
| 6 | Kyrie | [codepen](https://codepen.io/KyrieHaveGoodDay/pen/ExOBybe) |
| 7 | yuchih | [codepen](https://codepen.io/hijachu/pen/BaGgzwK?editors=1011) |
| 8 | Rochel | [codepen](https://codepen.io/rochelwang1205/pen/GRwbqQJ?editors=0010) |
| 9 | AYA | [codepen](https://codepen.io/NoNameNote/pen/dyQBXdB) |
| 10 | rChinnnn | [codepen](https://codepen.io/rChinnnn/pen/QWJXEGG) |
| 11 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/LYXKZmv) |
| 12 | Berlin | [codepen](https://codepen.io/3qberlin/pen/jOQjrvG?editors=1011) |
| 13 | ryan.chou | [codepen](https://codepen.io/csw8524/pen/vYQqKzE) |
| 14 | David0799 | [codepen](https://codepen.io/David0799/pen/abQgZwa) |
| 15 | billy_ti | [codepen](https://codepen.io/Ti-Show/pen/bGQPwdo?editors=1011) |
| 16 | wendy | [codepen](https://codepen.io/siaochanwu/pen/abQgmpo)
| 17 | MotoRin | [codepen](https://codepen.io/sakimoto/pen/dyQBpNM) |
| 18 | Wendy3 | [codepen](https://codepen.io/wendy03/pen/jOQjMGv) |
| 19 | Yi0863 | [codepen](https://codepen.io/YI0305/pen/qBQzajO?editors=1011) |
| 20 | ChaosTu#9311 | [codepen](https://codepen.io/torotu/pen/abQgmYO?editors=1010) |
| 21 | cataska | [codepen](https://codepen.io/lovecankill/pen/GRwbjvE) |
| 22 | smalljie | [codepen](https://codepen.io/smalljie/pen/eYQwdoY) |
| 23 | zona | [codepen](https://codepen.io/w242920/pen/MWzMjGR?editors=1111) |
| 24 | Ann Chou | [codepen](https://codepen.io/annchou_illu/pen/GRwbqzZ) |
| 25 | 羅羅 | [codepen](https://codepen.io/bjqs02/pen/KKrjaza) |
| 26 | chichi | [codepen](https://codepen.io/chichihuang/pen/dyQBOMV) |
| 27 | shcopy | [codepen](https://codepen.io/shcopy/pen/MWzMpgB) |
|28|汪汪|[Codepen](https://codepen.io/hunwooooof/pen/BaGELpO)|
|29|ejchuang|[Codepen](https://codepen.io/EJChuang/pen/mdQZWXw?editors=1111)|
| 30 | 瑀君 | [codepen](https://codepen.io/yennnnn/pen/QWJXpOB?editors=1111) |
| 31 | Leo | [codepen](https://codepen.io/Aruminiya/pen/LYXKyMm?editors=1111) |
| 32 | LinaChen | [codepen](https://codepen.io/LinaChen/pen/mdQZmav) |
| 33 | HsienLu | [codepen](https://codepen.io/Hsienlu/pen/bGQPqym?editors=1111) |
| 34 | kuanju27 | [codepen](https://codepen.io/Eero-Chiao/pen/oNQrwNP) |
| 35 | jerry456789 | [codepen](https://codepen.io/aria198a/pen/OJaegOM?editors=1011) |
| 36 | Yen | [codepen](https://codepen.io/TZU-HUANG-YEN/pen/MWzMoyo?editors=0011) |
| 37 | Kent | [codepen](https://codepen.io/labkunz/pen/MWzMvQx?editors=1111) |
| 38 | jasperlu005 | [codepen](https://codepen.io/uzzakuyr-the-reactor/pen/wvQLqep?editors=1011) |
| 39 | 地球儀 | [codepen](https://codepen.io/dayday1222/pen/wvQLqKq) |
| 40 | Nikki.Kang | [codepen](https://codepen.io/Nikki-Kang/pen/LYXKzPW) |
| 41 | 王偉青 | [codepen](https://codepen.io/lovegull/pen/zYMVEqB?editors=1011) |
| 42 | 泊岸#3466 | [codepen](https://codepen.io/qoq77416416/pen/vYQqeKd?editors=1011) |
| 43 | BalaBambe | [codepen](https://codepen.io/bambe-chen/pen/wvQLPKa) |
| 44 | 變羊魔法 | [codepen](https://codepen.io/cssf998811/pen/rNQEYWp) |
| 45 | Carole | [codepen](https://codepen.io/s892261118/pen/zYMVEmz?editors=0011)|
| 46 | Lulu | [codepen](https://codepen.io/Lin-Lulu/pen/VwVJyje?editors=1010)|
| 47 | 金魚 | [codepen](https://codepen.io/cso-goldfish/pen/PoxrQNB) |
| 48 | Liam | [codepen](https://codepen.io/liamkkobe/pen/JjeQpRW?editors=1011) |
| 49 | rainnping | [codepen](https://codepen.io/rainnping/pen/xxQoYOg) |
| 50 | Sui | [codepen](https://codepen.io/suihsilan/pen/bGQPMwY?editors=1010) |
| 51 | collinkao | [codepen](https://codepen.io/collin0825/pen/QWJXBzg) |
| 52 | Lishang | [codepen](https://codepen.io/LiShang/pen/BaGgqpG) |
| 53 | RJ | [codepen](https://codepen.io/RJ-S/pen/OJaeaML) |
| 54 | 喃喃 | [codepen](https://codepen.io/VeLario/pen/QWJXJLj?editors=0011) |
| 55 | azami | [codepen](https://codepen.io/azami/pen/jOQjdNd) |
| 56 | Johnson3669 | [codepen](https://codepen.io/crpbugqy-the-typescripter/pen/GRwbzgQ?editors=1111) |
| 57 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/OJaeGPW) |
| 58 | jiun7523 | [codepen](https://codepen.io/jiun-jiun/pen/GRwbaxX) |
| 59 | 妤ㄦ | [codepen](https://codepen.io/bmtuepzo-the-sans/pen/mdQZYKG) |
| 60 | Iris | [codepen](https://codepen.io/iris831206/pen/VwVoZvW?editors=1111) |
| 61 | Amberhh | [codepen](https://codepen.io/Amberhh/pen/MWzNgEw?editors=0011) |
| 62 | JJ Wu | [codepen](https://codepen.io/jesswu/pen/MWzNwzK?editors=1111) |
| 63 | Wei_Rio | [codepen](https://codepen.io/wei_wu/pen/ExOqVaw?editors=0011) |
| 64 | JohnChien | [codepen](https://codepen.io/glqwazid-the-selector/pen/XWyLQjO) |
| 65 | lingchang | [codepen](https://codepen.io/ling-chang/pen/rNQXWVN) |
| 66 | SKey | [codepen](https://codepen.io/Dale-Chien/pen/OJaKbEr) |
| 67 | SkyWoW | [codepen](https://codepen.io/WoW-Sky/pen/rNQXjGY?editors=1011) |
| 68 | PollyPO_Lee | [codepen](https://codepen.io/pollypo1986/pen/zYMgwNr) |
| 69 | 瑀君 | [codepen](https://codepen.io/yennnnn/pen/QWJXpOB?editors=1011) |
| 70 | HanHan | [codepen](https://codepen.io/Emma-Yang/pen/bGQXWrO) |
| 71 | besspeng | [codepen](https://codepen.io/besspengcl/pen/jOQgGoE) |
| 72 | Che1z | [codepen](https://codepen.io/Shih-Min-Hung/pen/OJaKvxL) |
| 73 | aray | [codepen](https://codepen.io/ceqchksj-the-flexboxer/pen/ExOqEpL?editors=0011) |
| 74 | Ataraxia | [codepen](https://codepen.io/ataraxia8888/pen/LYXwZLJ) |
| 75 | Ingrid | [codepen](https://codepen.io/ingrid-chi/pen/qBQzGeo?editors=1011) |
| 76 | Porin | [codepen](https://codepen.io/jgaafuka/pen/NWEQLXw) |
| 77 | davidchengtw| [codepen](https://codepen.io/davidcheng/pen/JjegmwJ) |
| 78 | ssshane | [codepen](https://codepen.io/sam6091260/pen/ExOqGWr?editors=0011) |
| 79 | Kaya | [Codepen](https://codepen.io/laron9486/pen/WNYVpLy) |
| 80 | Sebastian | [codepen](https://codepen.io/SebastianWei/pen/KKbPKaV?editors=0011) |
| 81 | 大衛 | [codepen](https://codepen.io/exnsrpjc/pen/poQMBQO?editors=1011) |
| 82 | Kai | [codepen](https://codepen.io/kaicheng928/pen/ZEVzLQO?editors=1011https://codepen.io/kaicheng928/pen/ZEVzLQO?editors=1011) |
| 83 | Alice| [codepen](https://codepen.io/AliceZhao/pen/eYbOROZ?editors=0010) |
| 84 | Yin| [codepen](https://codepen.io/andy888jam/pen/XWorevK?editors=1111) |
| 85 | Jasmin| [codepen](https://codepen.io/thejasmin/pen/BavBmqa) |
| 86 | Steve Tseng| [codepen](https://codepen.io/hifly0921/pen/qBLWpEQ) |
| 87 | Aden | [codepen](https://codepen.io/Osases/pen/yLGBvbw) |
| 88 | Cami | [codepen](https://codepen.io/fayevivi/pen/VwqZEyp) |
| 89 | Daphne | [codepen](https://codepen.io/DaphneShen/pen/poqzqeW) |
| 90 | owen | [codepen](https://codepen.io/owen-dong/pen/GRPKeLb?editors=1010) |
| 91 | Cami | [codepen](https://codepen.io/irisLife/pen/xxmKNVx) |
| 92 | Emily4869 | [codepen](https://codepen.io/aptx4869Emily/pen/LYMYPwy?editors=1011) |
| 93 | Mocha | [codepen](https://codepen.io/MochaLee/pen/jOXOwjq?editors=1011) |
| 94 | Rxzan | [codepen](https://codepen.io/Tzuru-Chen/pen/MWZWOdb) |
| 95 | 精靈 | [codepen](https://codepen.io/vesbexih-the-bashful/pen/MWZWOva) |
| 96 | Overy |[codepen](https://codepen.io/tupbsair-the-vuer/pen/QWzWBGR?editors=1111) |
| 97 | 小明#4408 | [codepen](https://codepen.io/ujlylmbv-the-lessful/pen/BavaMKR?editors=1011) |
| 98 | hungya |[codepen](https://codepen.io/hungya777/pen/zYyYbxv?editors=1111) |
| 99 | yoyo#2678 |[codepen](https://codepen.io/djmliogn-the-flexboxer/pen/jOXOoRX) |
| 100 | PoWei#8484 |[codepen](https://codepen.io/harrison-wei-lai/pen/JjwjgbZ?editors=1011) |
| 101 | curry | [codepen](https://codepen.io/wendy03/pen/jOQjMGv?editors=1011) |
| 102 | Jie016 | [codepen](https://codepen.io/Jie-Kuo/pen/NWeWNgM) |
| 103 | 阿旭 | [codepen](https://codepen.io/koei-lu/pen/eYbmoWW?editors=1011) |
| 104 | Ed Hsu | [codepen](https://codepen.io/Ed-Hsu/pen/GRPJKWZ?editors=1011) |
| 105 | 圈圈 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/NWeqrJm?editors=0011) |
| 106 | Yiren | [codepen](https://codepen.io/Yiren_Liou/pen/xxmGEJj) |
| 107 | Ken | [codepen](https://codepen.io/Ken720053/pen/KKbpNYB?editors=1111) |
| 108 | Carey#1010 | [codepen](https://codepen.io/Leo4077/pen/QWzWZya) |
| 109 | DavidTsai | [codepen](https://codepen.io/David-Tsai/pen/YzdyOdO?editors=0011) |
| 110 | Lydia | [codepen](https://codepen.io/ling-chen-the-flexboxer/pen/abPvOyR?editors=0011) |
| 111 | AmberLin | [codepen](https://codepen.io/autum55853/pen/JjwYbZz?editors=0011) |
| 112 | Nisa | [codepen](https://codepen.io/Nisa491/pen/OJrMeqx?editors=0001) |
| 113 | Jujube | [codepen](https://codepen.io/tendayling/pen/bGOeNrM?editors=1011) |

| 0 | user | [codepen]() |