---
# System prepended metadata

title: "\U0001F3C5 Day 4｜React Hook - useState 進階練習"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 4｜React Hook - 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` 也就是輸入的值。

[文件參考](https://zh-hant.reactjs.org/docs/forms.html#handling-multiple-inputs)

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


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
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 / 答案                              |
|:-----------------------:|:------------------------------------------------------------------------:|
|       Rice #8043        |     [CodePen](https://codepen.io/riecball/pen/yLKoqPy?editors=1011)      |
|     Joechiboo #3960     |           [CodePen](https://codepen.io/joe-chiboo/pen/MWVVmpe)           |
|       ねこ*#9385        |           [Codepan](https://codepen.io/kunpao0104/pen/ExEEmvv)           |
|       yunyun#5215       |           [Codepan](https://codepen.io/yun_yunni/pen/BarrRYX)            |
|     DIANAxAKKO#4298     |     [Codepen](https://codepen.io/redfire29/pen/dymmWeq?editors=1010)     |
|        LEO#7779         |            [Codepen](https://codepen.io/nekorice/pen/RwMMVjE)            |
|        魚魚#0937        |            [Codepen](https://codepen.io/fish0522/pen/dymmWJj)            |
|       黃士桓#7654       |         [codePen](https://codepen.io/shr-huan-huang/pen/gOeeWKJ)         |
|        Kimi#2092        |           [codePen](https://codepen.io/a3216lucy/pen/MWVVmXJ)            |
|       布魯諾#7239       |     [codePen](https://codepen.io/bruno-yu/pen/xxWWdjY?editors=1011)      |
|       lloydd#8224       |           [Codepen](https://codepen.io/thanatus25/pen/xxWWdez)           |
|     Bumble幫啵#0255     |      [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/QWmmvxy)      |
|      YenYing#4029       |    [Codepen](https://codepen.io/yenying0804/pen/eYMMWaG?editors=1011)    |
|        棒腿#9350        |     [CodePen](https://codepen.io/frankHsu/pen/MWVVmdo?editors=1011)      |
|        葉秋#2335        |     [CodePen](https://codepen.io/as880074/pen/eYMMWPR?editors=1111)      |
|        ZengZeng         |            [Codepen](https://codepen.io/tyzyoko/pen/XWEEgWE)             |
|        SHIN#6075        |            [Codepen](https://codepen.io/shin9626/pen/qBoojWJ)            |
|      rainboe#3329       |    [Codepen](https://codepen.io/g901612002/pen/GRxxEdq?editors=1011)     |
|       AllenW#1132       |             [Codepen](https://codepen.io/AllenW/pen/qBoompo)             |
|        𝓛𝓊𝒸𝓎#8635        |            [Codepen](https://codepen.io/lucygirl/pen/gOeeRPp)            |
|        威爾#1694        |            [CodePen](https://codepen.io/WILL_Wu/pen/VwXXWPo)             |
|        吉利#3810        |     [codepen](https://codepen.io/gillianyy/pen/zYWWzEm?editors=1111)     |
|       Evonne#7078       |     [codepen](https://codepen.io/Hsu1Fang/pen/RwMMgpN?editors=0011)      |
|           Ada           |     [codepen](https://codepen.io/zggsoagv-the-scripter/pen/poLLwyr)      |
|       Paper#1658        |          [CodePen](https://codepen.io/paper_hsiao/pen/eYMMRqx)           |
|        east#4003        |       [CodePen](https://codepen.io/EastM/pen/ZExxygV?editors=0010)       |
|        時雨#8837        |    [CodePen](https://codepen.io/jjustin-35/pen/PoRRjXp?editors=1111)     |
|         hw#0715         |       [Codepen](https://codepen.io/Lhwei/pen/GRxxvJm?editors=0011)       |
|      Timothy#5863       |         [Codepen](https://codepen.io/timothy_hippo/pen/bGvvrdL)          |
|       Arista#5802       |          [Codepen](https://codepen.io/arista-hsieh/pen/poLLwXZ)          |
|     Vada Chen#2055      |     [CodePen](https://codepen.io/vadachen/pen/oNqqwVg?editors=1011)      |
|        Ayre#0016        |    [CodePen](https://codepen.io/yichunlin09/pen/dymmRwo?editors=0011)    |
|      ChloeLo#4858       |            [CodePen](https://codepen.io/chloelo/pen/abYYwrg)             |
|       CofCat#9226       |     [CodePen](https://codepen.io/cofcat456/pen/vYRRJeZ?editors=1011)     |
|       Yanyan#3555       |           [Codepen](https://codepen.io/wei-yi-lee/pen/oNqqGjo)           |
|        無名#6427        |      [Codepen](https://codepen.io/Nomoney/pen/dymmRey?editors=1011)      |
|     座標33129#8748      |      [Codepen](https://codepen.io/ad80352/pen/RwMMZPK?editors=1111)      |
| React-慧茹(拉拉醬)#3414 |   [codepen](https://codepen.io/lala-lee-jobs/pen/mdxxqBe?editors=1111)   |
|        L0F0#8733        |       [Codepen](https://codepen.io/l0f0/pen/ExEEbge?editors=0011)        |
|       露易莎#7673       |    [Codepen](https://codepen.io/louisa-lin/pen/eYMMGPR?editors=1111)     |
|        zzly#9134        |              [Codepen](https://codepen.io/ly00/pen/xxWWPqm)              |
|    andersonshen#4675    |       [Codepen](https://codepen.io/luxyenni-the-bold/pen/ExEEbVR)        |
|       wiimax#4564       |           [Codepen](https://codepen.io/willismax/pen/WNzzOEO)            |
|      TaoDoris#5230      |           [Codepen](https://codepen.io/taomaomao/pen/NWYYwbd)            |
|       Chelly#6129       |     [Codepen](https://codepen.io/chellyhsu/pen/PoRROGP)     |
|        Shau#6400        |           [Codepen](https://codepen.io/shau-chen/pen/eYMMebQ)            |
|       KuoMin#4931       |             [Codepen](https://codepen.io/KuoMin/pen/bGvvrev)             |
|      山貓(焜)#7041      |            [Codepen](https://codepen.io/pen?template=dymmVaQ)            |
|        Nico#8739        |             [Codepen](https://codepen.io/Nicof2e/pen/RwMMxGp)             |
|        yuyu#6310        |     [Codepen](https://codepen.io/yuyu0905/pen/poLLpQX?editors=1011)      |
|       眼睛 #0314        |    [Codepen](https://codepen.io/thrizzacode/pen/YzaaevR?editors=1111)    |
|        RON#2813         |             [Codepen](https://codepen.io/Ron115/pen/XWEEZPa)             |
|      IreneLee#7932      |     [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/jOzzZBE)      |
|   Midnightdinner#6220   |           [Codepen](https://codepen.io/woowooyong/pen/ZExxxer)           |
|           aki           |             [codepen](https://codepen.io/aki168/pen/WNzzyQq)             |
|        城堡#2126        |           [Codepen](https://codepen.io/tthcastle/pen/NWYYzQN)            |
|        shin#5792        |      [Codepen](https://codepen.io/hah1030/pen/ExEERQv?editors=0011)      |
|       easton#3863       |       [Codepen](https://codepen.io/EastonIsCodingNow/pen/PoRRBJN)        |
|       紅豆豆#0518       |     [Codepen](https://codepen.io/zoseqlpc/pen/jOzzpxa?editors=0011)      |
|      Mr.Sean#3825       |     [Codepen](https://codepen.io/sean_1215/pen/WNzzKYZ?editors=1011)     |
|       芝麻凜#1627       |     [Codepen](https://codepen.io/bardkidd/pen/MWVVqjL?editors=0011)      |
|       Kenge#3690        |             [Codepen](https://codepen.io/pgkusn/pen/XWEEPzr)             |
|      LinaChen#1796      |            [Codepen](https://codepen.io/LinaChen/pen/eYMMLdo)            |
|         Wu#0167         |           [Codepen](https://codepen.io/Xander0705/pen/gOeedvo)           |
|     Dylan_Lin#7320      |     [Codepen](https://codepen.io/lin-dylan/pen/rNddwmK?editors=1111)     |
|       Claire#2116       |    [Codepen](https://codepen.io/claire-chang-the-bashful/pen/MWVVqNW)    |
|      Stanley#2505       |           [Codepen](https://codepen.io/bigbearada/pen/RwMMerJ)           |
|  charlottelee849#0366   |   [Codepen](https://codepen.io/charlotte-lee/pen/xxWWybq?editors=0010)   |
|     kyle890721#1016     |           [Codepen](https://codepen.io/KYLE890721/pen/ExEEdLw)           |
|       POKA #2168        |           [Codepen](https://codepen.io/POKAHSIAO/pen/XWEExPa)            |
|       Ryder #7398       |    [Codepen](https://codepen.io/rider159159/pen/qBooQZQ?editors=1010)    |
|      Dale Hsu#0355      |            [Codepen](https://codepen.io/dale_hsu/pen/KKooxrY)            |
|       Yihan#5560        |    [Codepen](https://codepen.io/h513hh513h/pen/NWYYEBg?editors=0011)     |
|     hiYifang #0736      |            [Codepen](https://codepen.io/hiYifang/pen/LYddraJ)            |
|         JC#8658         |           [Codepen](https://codepen.io/jcsamoyed/pen/VwXXVRL)            |
|       灰塵貓#7994       |     [Codepen](https://codepen.io/rjk66268/pen/GRxxPdO?editors=0011)      |
|       Yiling#4054       |      [Codepen](https://codepen.io/lin010/pen/zYWWymv?editors=1011)       |
|      Evileye#0666       |      [Codepen](https://codepen.io/gn-lin/pen/wvmmQqz?editors=1111)       |
|       Anson#3594        |   [Codepen](https://codepen.io/huanmingchang/pen/poLLXLd?editors=0002)   |
|      Eric Su#7798       |             [Codepen](https://codepen.io/wc-su/pen/GRxxVLx)              |
|       Morris#8755       |     [Codepen](https://codepen.io/morrisss/pen/abYYeem?editors=1011)      |
|       IceSam#7836       |            [Codepen](https://codepen.io/sam-hsu/pen/oNqqKQB)             |
|       hobby#6565        |           [Codepen](https://codepen.io/hobbyling/pen/GRxdKgG)            |
|       Yukon#2618        |            [Codepen](https://codepen.io/ukowork/pen/bGvvRde)             |
|        lingxuan         |   [Codepen](https://codepen.io/lingxuan0618/pen/YzaaJWa?editors=0001)    |
|        彼得#1923        |            [Codepen](https://codepen.io/shiou-ho/pen/dymeyGa)            |
|      Sylvia-H#0024      |          [Codepen](https://codepen.io/Cosmosheart/pen/ExELaNq)           |
|       Mitour#0672       |      [CodePen](https://codepen.io/mitour/pen/eYMrYZe?editors=0011)       |
|      Tuhacrt#0008       |            [Codepen](https://codepen.io/Tuhacrt/pen/oNqdXqq)             |
|         翔#0859         |   [Codepen](https://codepen.io/energy95272z/pen/ExELVvp?editors=1010)    |
|      MarsKuo#6015       |            [Codepen](https://codepen.io/MarsKuo/pen/wvmjKEg)             |
|       HedgehogKU        |   [CodePen](https://codepen.io/hedgehogkucc/pen/YzaLymy?editors=1010)    |
|       seijo#1585        |    [CodePen](https://codepen.io/SeijoHuang/pen/abYGZpj?editors=0010)     |
|      山貓(焜)#7041      |            [CodePen](https://codepen.io/pen?template=dymmVaQ)            |
|        niel#2413        |     [Codepen](https://codepen.io/danielhsu/pen/jOzxMgR?editors=0011)     |
|        Neal#0665        |      [Codepen](https://codepen.io/neallkf/pen/VwXXGMP?editors=0010)      |
|       陳sam#9117        |     [Codepen](https://codepen.io/euldpliv/pen/xxWjgGj?editors=1111)      |
|      JessSong#5050      |           [Codepen](https://codepen.io/jssanji03/pen/oNqqQZO)            |
|         GL#2256         |             [Codepen](https://codepen.io/4genie/pen/poLVRpr)             |
|      yoshidc#0455       |            [Codepen](https://codepen.io/yoshiyyc/pen/QWmmeQZ)            |
|     Robert Lo#9653      |     [Codepen](https://codepen.io/Robert-Lo/pen/LYdmxEJ?editors=1111)     |
|          moitw          |      [codepen](https://codepen.io/tsuifei/pen/KKoRWwo?editors=1011)      |
|   Carolkiki2003 #7399   |            [codepen](https://codepen.io/wasfzuig/pen/gOeeGey)            |
|huch09#1426 | [codepen](https://codepen.io/subarashii-huch09/pen/WNzJdxd?editors=0011) |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/eYMrygx) |
| NinaKuo#3332 |[Codepen](https://codepen.io/ninakuo0814/pen/RwMyMNd)|
| john21429#9434 |[Codepen](https://codepen.io/john21429/pen/NWYMBGG?editors=1111)|
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/ZExojyX?editors=0011) |
|kevinhes#2881|[CodePen](https://codepen.io/kevinhes/pen/xxWjBZW?editors=0011)|
|yiwun#0953|[Codepen](https://codepen.io/kagamiakira_IBUN/pen/dymePXG?editors=1111)|
|Kelvin#3296|[Codepen](https://codepen.io/kelvinchang/pen/xxWjepK)|
|𝔼.𝕎#4742|[Codepen](https://codepen.io/kidult316/pen/MWVGRGL)|
|Pandaa #7740|[Codepen](https://codepen.io/pandaachu/pen/WNzJBvL)|
|Rikku#1756|[Codepen](https://codepen.io/rikkubook/pen/mdxLZdv?editors=1111)|
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/QWmrXpE?editors=1011)|
|YuZhun#1362|[Codepen](https://codepen.io/danzhun/pen/gOezNjp?editors=1111)|
|Wins#8457|[Codepen](https://codepen.io/winszhuang/pen/KKoROdQ?editors=1111)|
|史蒂夫#5075|[Codepen](https://codepen.io/TaroPanda/pen/RwMJbeB)|
|anby#7112|[Codepen](https://codepen.io/andy-ch-bo-an/pen/xxWzxrz?editors=1011)|
|Wendy Chang#8310|[Codepen](https://codepen.io/Zhangbun/pen/poLKoeR)|
| 薯餅#3581 |[Codepen](https://codepen.io/ColdingPoTaTo/pen/zYWaYXJ)|
| Overy#4545 |[Codepen](https://codepen.io/oceanwhale52hz/pen/RwMJRJX?editors=1111)|
| wenyun#2362 |[Codepen](https://codepen.io/wenyuncc/pen/VwXdKbL?editors=0011)|
| YJ#1839 |[Codepen](https://codepen.io/cshjufxc/pen/mdxKOwx?editors=1111)|
| Doris#1140 |[Codepen](https://codepen.io/doris79588/pen/WNzyoyB)|
| EvaLin#4546 |[Codepen](https://codepen.io/evalin0316/pen/KKoeNYp?editors=1111)|
| Shani#4593 |[Codepen](https://codepen.io/ShaniMa/pen/abYKpOL)|
| Emily Hsi #9066 |[Codepen](https://codepen.io/EmilyHsi/pen/bGvKgWd)|
| BEAN #8402 |[Codepen](https://codepen.io/Beanhuang/pen/JjLZPay?editors=0011)|
| james#1443 |[Codepen](https://codepen.io/clothn0105700/pen/ZExReJq?editors=1111)|
|小白兔|[codepan](https://codepen.io/wei-nie/pen/BarVWrd?editors=0011)|
|TedWang|[codepan](https://codepen.io/wangtaiyan/pen/XWEYaJP?editors=1011)|
|JimHwang#3594|[codepan](https://codepen.io/jimh1129/pen/JjLZMmj?editors=1111)|
|emma#3398|[codepan](https://codepen.io/itsems/pen/BarVJMm)|
|小熊#0685|[codepan](https://codepen.io/YuHan0704/pen/xxWzpNb?editors=0011)|
|阿暟|[codepen](https://codepen.io/patrickrrr007/pen/WNzypoZ?editors=0011)|
|喬喬#2824|[codepen](https://codepen.io/joanne-wei/pen/gOeKvEQ?editors=1011)|
|Chaim#5739|[codepen](https://codepen.io/hgit915/pen/NWYMpyz)|
|真．穎旻粉撕#4995|[codepen](https://codepen.io/gbnbihif/pen/bGvKQYd)|
|RayRayHuang#1998|[codepen](https://codepen.io/hongrueihuang/pen/KKoebLx)|
|JimmyChang#5558|[codepen](https://codepen.io/JimmyChangWenChi/pen/YzavgpO?editors=1011)|
|Evachan#5729|[codepen](https://codepen.io/Eva-go/pen/YzavgRM?editors=1010)|
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/XWEYOJv?editors=1111) |
| Sabrina77#1675 | [Codepen](https://codepen.io/sabrina-huang/pen/WNzyWqJ) |
|Vivi0225#3634|[Codepen](https://codepen.io/vivian820225/pen/wvmmmBM)|
| Carol Li #2269|[Codepen](https://codepen.io/carolli834/pen/xxWzNbG?editors=1011)|
|Otis#8455|[Codepen](https://codepen.io/humming74/pen/QWmBWxN?editors=1011)|
|龜人#7299|[Codepen](https://codepen.io/dullshen/pen/ZExjWQZ?editors=0011)|
|toshow#5609|[Codepen](https://codepen.io/toshow/pen/YzavbVQ)|
|Louise|[Codepen](https://codepen.io/LouiseHuang/pen/JjLZzMv)
|黑白兔#0684|[codepen](https://codepen.io/johnny329/pen/vYRaepJ)|
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/dymKxPE)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/vYRajdE)|
|minmin#8960| [Codepen](https://codepen.io/minfan-chen/pen/ExEpRqg)|
|larahuang#8309|[Codepen](https://codepen.io/lara1105huang/pen/XWEBxvd)|
|許揚民 Evan#4546|[Codepen](https://codepen.io/gitevanhsu/pen/KKoeYxe)|
|ryo#0160|[Codepen](https://codepen.io/ryo72/pen/KKoxPGE)|
|Judy☻|[Codepen](https://codepen.io/hsiaohan/pen/YzajJLQ?editors=0011)|
|Cookie SSS#6991|[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/abYamaP?editors=0011)|
|Rocker#6235|[Codepen](https://codepen.io/RockerLi/pen/NWYLdbm?editors=1111)|
|雪莉#4827|[Codepen](https://codepen.io/utshang216/pen/gOeBbBp?editors=1011)|
|SeanYH#9025|[codepen](https://codepen.io/paizohhm-the-bold/pen/BarqRBL)|
|Frank#5177|[codepen](https://codepen.io/Frankhu5150/pen/ExEdmXJ?editors=1111)|
|Cherry#4647|[CodePen](https://codepen.io/qoosdd89382/pen/MWVPoQY?editors=0010)|
|Josh DB #3366|[CodePen](https://codepen.io/joshjong/pen/rNdqLRW)|
|小班 #3324|[CodePen](https://codepen.io/jlhung168/pen/LYdggLw?editors=1011)|
|蘇蘇 #0426|[CodePen](https://codepen.io/sabine1123/pen/WNzagZr)|
|鉛筆 #7763|[CodePen](https://codepen.io/zoeguava/pen/NWYOExB?editors=1011)|
|VicSun|[CodePen](https://codepen.io/hsuan333/pen/qBoJpQQ?editors=1011)|
|魚魚 #1220|[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/yLKRrVJ)|
|Mori#5582|[CodePen](https://codepen.io/flower9312/pen/PoRyMJr)|
|hsiuhsiu #7412|[CodePen](https://codepen.io/hsiuhsiu/pen/zYWmXbj?editors=0012)|
| Neuf#3083 | [CodePen](https://codepen.io/yifanneuf/pen/GRxwPbb?editors=0010)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/LYdXwPy)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/jOzXGVV?editors=1111)
|SunnyCheng#4113|[Codepen](https://codepen.io/Sunny0509/pen/yLKQJqm?editors=1111)|
|Emily #3648  |[CodePen](https://codepen.io/flien/pen/wvmxyej?editors=1011)|
|fannnny #7112  |[CodePen](https://codepen.io/fannyHO/pen/OJvrQMJ?editors=0011)|
|eching#9183  |[CodePen](https://codepen.io/echin/pen/ZExwoYN)|
|Eileen#6454  |[CodePen](https://codepen.io/Eileen-io/pen/OJvqpao)|
|ninipopo#7983  |[CodePen](https://codepen.io/Robinnini/pen/eYMoeGV?editors=1011)|
|SleepWalk#1635  |[CodePen](https://codepen.io/arthurliinn/pen/VwxKLNz?editors=0011)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/OJGweEZ)





