React Hook - useState 進階

繼續昨天的 useState 練習，今天要練習的是物件資料，這樣的用法很常被用在 input 練習上，先來看個範例。舉例來說：

/* 宣告 userData 物件，並且裡頭 account & password 資料為 String，
 ** 使用 setUserData() 透過 useState 綁定上 userData
 */
const [userData, setUserData] = useState({
  account: "",
  password: "",
});

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

/* value 為 input 所得到的數值，所以將數值，綁定上 userData.account
 ** 並且會透過 onChange 的事件形式來更動資料
 ** 這裡預計會宣告一個 handleChange 的 Func 來做監聽 onChange 過後，要執行什麼事情
 */
<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 也就是輸入的值。

文件參考

codepen:

React Hook - useState 進階 - 表單應用