react表單_受控元件與非受控元件

一、受控元件

在 react 中，表單元素通過元件的 state 屬性來自己維護 state，并根據使用者輸入調用setState()來進行資料更新，使 react 的 state 成為“唯一資料源”，被 React 以這種方式控制取值的表單輸入元素就叫做“受控元件”。

在 React 中，資料是單向流動的。從示例中，我們能看出來表單的資料源于元件的 state，并 通過 props 傳入，這也稱為單向資料綁定。然後，我們又通過 onChange 事件處理器将新的表單數 據寫回到元件的 state，完成了雙向資料綁定。這也意味着我們可以在執行最後 一步 setState 前，對表單值進行清洗和校驗。

React 受控元件更新 state 的流程:

（1）可以通過在初始 state 中設定表單的預設值。

（2）每當表單的值發生變化時，調用 onChange 事件處理器。

（3）事件處理器通過合成事件對象 e 拿到改變後的狀态，并更新應用的 state。

（4）setState 觸發視圖的重新渲染，完成表單元件值的更新。

二、非受控元件

如果一個表單元件沒有 value props(單選按鈕和複選框對應的是 checked prop) 時，就可以稱為非受控元件。相應地，你可以使用 defaultValue 和 defaultChecked prop 來表示 元件的預設狀态

<col>

元素

value屬性

change回調

回調擷取新值

&lt;input type="text" /&gt;

value="string"

onChange

event.target.value

&lt;input type="checkbox" /&gt;

checked={boolean}

event.target.checked

&lt;input type="radio" /&gt;

&lt;textarea /&gt;

&lt;select /&gt;

value="option value"

三、受控元件與非受控元件對比

受控元件和非受控元件各有優點，應該根據自己的具體需求選擇受控還是非受控

特征

非受控

受控

一次性取值（比如送出表單時）

√

√  

送出時驗證

實時表單驗證

×

有條件的禁用送出按鈕

強制輸入格式

×  

一個資料有多個輸入

動态輸入