在事件與useState()的範例裡，每一個輸入都對應一個state變數 (如:userID、password)以及一個處理輸入的函數(如:onChangeId()、onChangePassword)，當我們要輸入的內容很多的時候，程式碼就會很長很複雜，這時候就可以使用以下的技巧，首先，我們先建立一個state物件(如:user)

const [user, setUser] = useState({id:"", password:""});

接下來，將輸入的值跟state物件，透過value，連起來:

<label>學號:<input id ="userID" type="text" name="userID" **value={user.id}** maxLength="9" size="9" placeholder="請輸入學號" onChange={onChangeId}></input>@mail.fju.edu.tw</label><br/>
<label>密碼:</label><input id ="password" type="password" name="password" **value={user.password}** placeholder="請輸入密碼" onChange={onChangePassword}></input><br/>

onChange也可以濃縮成一個函數，這裡使用到javascript的兩個語法，第一個是spread語法，利用「…user」取得user物件裡的內容，再加上輸入的內容:

  const onChangeId = function(event) {
    setUser({...user,id:event.target.value});
  }

接下來，用第二個語法來合併兩個函數，也就是取得輸入欄位的name來做為物件的屬性名稱:

  function handleChange(event){
    setUser({...user, **[event.target.name]**:event.target.value});
  }

注意，這時候，輸入欄位的名稱就要跟物件的屬性名稱一樣，例如:

<label>學號:<input id ="userID" type="text" **name="id"** **value={user.id}** maxLength="9" size="9" placeholder="請輸入學號" onChange=**{handleChange}**></input>@mail.fju.edu.tw</label><br/>
<label>密碼:</label><input id ="password" type="password" name="password" **value={user.password}** placeholder="請輸入密碼" onChange=**{handleChange}**></input><br/>

完整的程式:

import { useState } from "react";
export default function LOGIN() {
  const [user, setUser] = useState({id:"", password:""});
  const [message, setMessage] = useState("");
  function onChange(event){
    setUser({...user, **[event.target.name]**:event.target.value});
  }

  function login(){
    if (user.id == "test" && user.password =="password"){
      setMessage("登入成功");
    }
    else {
      setMessage("登入失敗");
    }
  }
  return (
    <div>
    <h1>登入你的輔大 Go Go 帳戶 :)</h1>
    <p>
      <label>學號:<input id ="userID" type="text" name="id" value={user.id} maxLength="9" size="9" placeholder="請輸入學號" onChange={onChange}></input>@mail.fju.edu.tw</label><br/>
      <label>密碼:</label><input id ="password" type="password" name="password" value={user.password} placeholder="請輸入密碼" onChange={onChange}></input><br/>
      <input type="submit" value="登入" onClick={login}/>
      {message}
    </p>
  </div>
  )
}

• Form in React (行動裝置程式設計教材)