# 🏅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) |
Sign in with Wallet
Connect another wallet