【React 學習筆記 EP.10】表單處理

什麼是表單處理？

表單處理是收集使用者輸入並將其與應用程式資料同步的機制。在 React 中，我們通常透過狀態 (State) 來接管表單元素，以精確控制資料驗證與提交邏輯。

表單處理基礎語法

1. 受控組件：將表單元素的值綁定到 React 的狀態。
2. 狀態綁定：透過 value 屬性，將輸入框的顯示內容與定義好的變數緊密連接。
3. 事件監聽：使用 onChange 屬性攔截使用者的每次鍵盤輸入，並即時更新對應的狀態。
4. 防止預設行為：在表單的 onSubmit 事件中使用 e.preventDefault() 阻止瀏覽器觸發重新整理頁面。

常見錯誤與解決方法

2. 頁面重新載入：提交表單時未防止預設行為，建議在處理提交的函式第一行加入 e.preventDefault()。

import { useState } from "react";

export default function LoginForm() {
  // 1. 使用「物件」來集中管理多個輸入框的狀態
  const [formData, setFormData] = useState({
    account: "",
    password: "",
  });

  // 2. 共用的輸入事件處理函式 (處理多個輸入框的關鍵)
  const handleInputChange = (event) => {
    // 從觸發事件的元素 (input) 中解構出 name 和 value 屬性
    const { name, value } = event.target;

    setFormData((prevData) => ({
      ...prevData, // 展開並保留先前的狀態資料
      [name]: value, // 動態更新對應 name 屬性的欄位值
    }));
  };

  const handleFormSubmit = (event) => {
    event.preventDefault(); // 阻擋表單送出導致頁面重新載入的預設行為

    alert(`登入成功！\n帳號：${formData.account}\n密碼：${formData.password}`);

    // 送出成功後，清空表單狀態與輸入框
    setFormData({ account: "", password: "" });
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <div style={{ marginBottom: "10px" }}>
        <label htmlFor="accountInput">帳號：</label>
        <input
          id="accountInput"
          name="account" /* 必須設定 name 屬性，名稱需與 formData 物件的 key 完全一致 */
          type="text"
          value={formData.account}
          onChange={handleInputChange}
          required /* HTML5 驗證：設定為必填欄位 */
        />
      </div>

      <div style={{ marginBottom: "10px" }}>
        <label htmlFor="passwordInput">密碼：</label>
        <input
          id="passwordInput"
          name="password" /* 必須設定 name 屬性，名稱需與 formData 物件的 key 完全一致 */
          type="password"
          value={formData.password}
          onChange={handleInputChange}
          required /* HTML5 驗證：設定為必填欄位 */
          minLength={6} /* HTML5 驗證：限制最少需輸入 6 個字元 */
        />
      </div>

      <button type="submit">安全登入</button>
    </form>
  );
}