在 React 的宣告式編程範式中，使用者介面是其狀態的直接映射。此原則深刻影響了前端的表單設計，將傳統由 DOM 管理的輸入元素，轉化為由應用程式狀態驅動的組件。此模式的核心在於建立「單一數據源」（Single Source of Truth），確保數據流的可預測性與可維護性。本文將從理論層面剖析 React 表單處理的兩種途徑：「受控組件」模式，它將表單值與 React 狀態綁定；以及「非受控組件」模式，它利用 Ref 直接操作 DOM。透過對比其運作機制與適用情境，我們將釐清如何選擇最合適的表單架構，以建構穩健的互動介面。

React表單設計：駕馭狀態與事件的藝術

在現代前端應用中，表單是使用者與系統互動的核心介面。React以其宣告式編程範式，為表單處理帶來了獨特的優勢。本章將深入探討在React環境下，如何高效、穩健地建構與管理表單，並解析其背後的設計哲學與實踐策略。玄貓將引導您掌握從基礎元素定義到複雜狀態管理的全方位表單開發技能。

7.1 React表單的推薦實踐：受控組件模式

React中處理表單數據的核心思想是「受控組件」（Controlled Components）。這意味著表單元素的值由React的狀態（state）來管理，而不是由DOM自身維護。當表單元素的值發生變化時，React的狀態會隨之更新，進而重新渲染組件，確保UI與數據始終保持同步。這種模式提供了單一數據源的清晰性，使得表單數據的驗證、轉換和提交變得更加可預測和易於管理。

7.1.1 定義表單與其事件機制

在React中，一個表單本質上是一個React組件。我們透過JSX來定義表單的結構，並將事件處理器（event handlers）綁定到表單元素上，以響應使用者的輸入。最常見的事件是onChange，它會在表單元素的值每次變動時觸發。對於表單提交，則使用onSubmit事件。

7.1.1.1 宣告式表單元素建構

在React中，表單元素如<input>, <textarea>, <select>等，其值不再直接由DOM管理。相反，它們透過value屬性綁定到組件的狀態，並透過onChange事件來更新該狀態。這種模式確保了數據流的單向性，即數據從狀態流向表單元素，而表單元素的變化則透過事件回調更新狀態。

  graph TD
    A[使用者輸入] --> B{onChange事件觸發}
    B --> C[事件處理器]
    C --> D[更新組件狀態 (setState)]
    D --> E[組件重新渲染]
    E --> F[表單元素顯示新值]
    F --> G[UI與數據同步]

看圖說話：

此圖示展示了React受控組件模式下，表單元素值更新的完整生命週期。從使用者在表單中輸入內容開始，觸發onChange事件。該事件隨後調用預先定義的事件處理器，該處理器負責更新組件的內部狀態。狀態更新後，React會觸發組件的重新渲染，使得表單元素顯示最新的狀態值，從而確保使用者介面與底層數據邏輯保持一致。這種單向數據流的設計，極大地簡化了表單數據的管理與追蹤。

7.1.1.2 捕捉表單變動：onChange的藝術

onChange事件是React受控組件的基石。它不僅僅是監聽輸入框的變化，更是將DOM事件與React狀態管理連接起來的橋樑。當任何受控表單元素的值發生變動時，onChange事件都會觸發，並傳遞一個事件物件。開發者可以從這個事件物件中提取出最新的值，並用它來更新組件的狀態。這使得我們能夠即時響應使用者的輸入，並執行諸如即時驗證、格式化或計算等操作。

7.1.1.3 帳戶欄位範例：實踐受控組件

考量一個典型的帳戶註冊表單，其中包含使用者名稱、電子郵件和密碼等欄位。每個欄位都應該是一個受控組件。例如，使用者名稱輸入框的value屬性會綁定到組件狀態中的username，而其onChange事件則會調用一個處理函數，該函數會將輸入框的新值更新到username狀態。

class AccountForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
      password: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit(event) {
    event.preventDefault(); // 阻止瀏覽器預設的表單提交行為
    console.log('表單提交數據:', this.state);
    // 在此處執行數據驗證或API請求
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          使用者名稱:
          <input
            type="text"
            name="username"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <label>
          電子郵件:
          <input
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <label>
          密碼:
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <button type="submit">註冊</button>
      </form>
    );
  }
}

在這個範例中，handleChange函數是一個通用的事件處理器，它根據輸入框的name屬性來更新對應的狀態。handleSubmit則處理表單提交邏輯，並阻止了瀏覽器預設的重新載入行為。

7.2 React表單的替代處理方式：非受控組件與其考量

儘管受控組件是React處理表單的推薦模式，但在某些特定情境下，非受控組件（Uncontrolled Components）也提供了一種替代方案。非受控組件允許DOM自身維護表單元素的值，而React僅在需要時透過**參考（Refs）**來獲取這些值。這種模式在處理簡單表單、檔案上傳或與第三方DOM庫整合時可能更為便捷。

7.2.1 透過Ref捕捉變動的非受控元素

在非受控組件中，我們不會將表單元素的值綁定到React的狀態。相反，我們使用Ref來直接訪問DOM元素，並在需要時（例如表單提交時）從DOM中獲取其當前值。這種方式減少了每次輸入時的狀態更新開銷，但同時也失去了React狀態管理帶來的即時響應和數據同步優勢。

  graph TD
    A[使用者輸入] --> B[DOM直接更新值]
    B --> C{表單提交}
    C --> D[透過Ref獲取DOM元素]
    D --> E[從DOM元素讀取值]
    E --> F[處理表單數據]

看圖說話：

此圖示描繪了非受控組件的數據流。使用者在表單元素中輸入內容後，DOM會直接更新其內部值，而React組件並不會即時感知或管理這些變化。只有當特定的事件（如表單提交）發生時，組件才會透過Ref機制直接訪問DOM元素，從中讀取當前的值，然後進行後續的數據處理。這種模式繞過了React的狀態管理，直接與底層DOM互動，適用於對即時響應性要求不高或需要與非React程式碼整合的場景。

7.2.1.1 無需即時捕捉變化的非受控元素

在某些情況下，我們可能不需要在每次輸入時都捕捉表單元素的變化。例如，一個簡單的搜尋框，我們只關心使用者點擊搜尋按鈕時的最終輸入值。此時，使用非受控組件可以簡化程式碼，避免不必要的狀態更新。我們只需在提交事件中，透過Ref獲取輸入框的值即可。

class UncontrolledForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // 創建一個Ref
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('搜尋關鍵字:', this.inputRef.current.value); // 透過Ref獲取值
    // 執行搜尋邏輯
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          搜尋:
          <input type="text" ref={this.inputRef} /> {/* 將Ref綁定到輸入框 */}
        </label>
        <button type="submit">搜尋</button>
      </form>
    );
  }
}

在這個範例中，inputRef被綁定到<input>元素上。當表單提交時，this.inputRef.current.value會直接從DOM中取出輸入框的當前值。

結論

縱觀React表單設計中受控與非受控組件的實踐效果，其核心並非單純的技術優劣之爭，而是開發哲學與專案架構的權衡。這兩種模式的選擇，直接反映了開發團隊對短期效率與長期系統穩健性的價值排序。

受控組件雖然在初期建構上增加了狀態管理的功夫，卻為應用程式建立了可預測的單一數據源，這在應對複雜業務邏輯、實現即時驗證與確保團隊協作一致性時，展現出無可取代的長期維護價值。相對地，非受控組件以其簡潔性在特定場景（如簡單搜尋或檔案上傳）中提供了開發效率的捷徑，但若將其濫用於需要精細狀態管理的複雜表單，則極易導致程式碼難以追蹤與測試，形成隱性的技術債。

展望未來，表單管理的趨勢並非在兩者間做出絕對選擇，而是朝向更智慧的融合。新一代的表單函式庫，正致力於結合非受控組件的渲染性能優勢與受控組件的清晰開發體驗，實現高效能與高可維護性的最佳平衡。

玄貓認為，高階開發者應跳脫「何者為佳」的二元思維，轉而培養根據業務複雜度、團隊協作模式與長期維護成本，進行情境化決策的能力。精準判斷何時採用何種模式，或策略性地結合兩者優勢，才是真正駕馭表單設計這門藝術的精髓所在。