在 React 里，HTML 表單元素的工作方式和其他的 DOM 元素有些不同，這是因為表單元素通常會保持一些內部的 state。例如這個純 HTML 表單只接受一個名稱：

此表單具有默認的 HTML 表單行為，即在用戶提交表單后瀏覽到新頁面。如果你在 React 中執行相同的代碼，它依然有效。但大多數情況下，使用 JavaScript 函數可以很方便的處理表單的提交， 同時還可以訪問用戶填寫的表單數據。實現這種效果的標準方式是使用“受控組件”。

受控組件

在 HTML 中，表單元素(如、 和 )之類的表單元素通常自己維護 state，并根據用戶輸入進行更新。而在 React 中，可變狀態(mutable state)通常保存在組件的 state 屬性中，并且只能通過使用 setState()來更新。

我們可以把兩者結合起來，使 React 的 state 成為“唯一數據源”。渲染表單的 React 組件還控制著用戶輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”。

例如，如果我們想讓前一個示例在提交時打印出名稱，我們可以將表單寫為受控組件：

由于在表單元素上設置了 value 屬性，因此顯示的值將始終為 this.state.value，這使得 React 的 state 成為唯一數據源。由于 handlechange 在每次按鍵時都會執行并更新 React 的 state，因此顯示的值將隨著用戶輸入而更新。

對于受控組件來說，每個 state 突變都有一個相關的處理函數。這使得修改或驗證用戶輸入變得簡單。例如，如果我們要強制要求所有名稱都用大寫字母書寫，我們可以將 handlechange 改寫為：

textarea 標簽

在 HTML 中, 元素通過其子元素定義其文本:

而在 React 中， 使用 value 屬性代替。這樣，可以使得使用 的表單和使用單行 input 的表單非常類似：

請注意，this.state.value 初始化于構造函數中，因此文本區域默認有初值。

select 標簽

在 HTML 中， 創建下拉列表標簽。例如，如下 HTML 創建了水果相關的下拉列表：

請注意，由于 selected 屬性的緣故，椰子選項默認被選中。React 并不會使用 selected 屬性，而是在根 select 標簽上使用 value 屬性。這在受控組件中更便捷，因為您只需要在根標簽中更新它。例如：

總的來說，這使得 , 和 之類的標簽都非常相似—它們都接受一個 value 屬性，你可以使用它來實現受控組件。

注意

你可以將數組傳遞到 value 屬性中，以支持在 select 標簽中選擇多個選項：

文件 input 標簽

在 HTML 中， 允許用戶從存儲設備中選擇一個或多個文件，將其上傳到服務器，或通過使用 JavaScript 的 File API 進行控制。

因為它的 value 只讀，所以它是 React 中的一個非受控組件。將與其他非受控組件在后續文檔中一起討論。

處理多個輸入

當需要處理多個 input 元素時，我們可以給每個元素添加 name 屬性，并讓處理函數根據 event.target.name 的值選擇要執行的操作。

例如：

這里使用了 ES6 計算屬性名稱的語法更新給定輸入名稱對應的 state 值：

例如：

等同 ES5:

另外，由于 setState() 自動將部分 state 合并到當前 state, 只需調用它更改部分 state 即可。

受控輸入空值

在受控組件上指定 value 的 prop 可以防止用戶更改輸入。如果指定了 value，但輸入仍可編輯，則可能是意外地將value 設置為 undefined 或 null。

下面的代碼演示了這一點。(輸入最初被鎖定，但在短時間延遲后變為可編輯。)

受控組件的替代品

有時使用受控組件會很麻煩，因為你需要為數據變化的每種方式都編寫事件處理函數，并通過一個 React 組件傳遞所有的輸入 state。當你將之前的代碼庫轉換為 React 或將 React 應用程序與非 React 庫集成時，這可能會令人厭煩。在這些情況下，你可能希望使用非受控組件, 這是實現輸入表單的另一種方式。

成熟的解決方案

如果你想尋找包含驗證、追蹤訪問字段以及處理表單提交的完整解決方案，使用 Formik 是不錯的選擇。然而，它也是建立在受控組件和管理 state 的基礎之上 —— 所以不要忽視學習它們。

總結

以上是生活随笔為你收集整理的html表单代码例子_关于React的这些细节，你知道吗？-表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。