針對於表單元素而言，如果資料由元件本身進行維護，讓react的state狀態成為唯一資料來源的話，那就是受控元件。
非受控元件不需要寫事件處理函式，由dom自身進行維護。一般通過ref進行dom的繫結。
受控元件：在html中，表單元素通常自己維護 state，並根據使用者輸入進行更新。而在 react 中，可變狀態通常儲存在元件的 state 屬性中，並且只能通過使用受控元件示例：setstate()來更新。我們可以把兩者結合起來，使 react 的 state 成為「唯一資料來源」。渲染表單的 react 元件還控制著使用者輸入過程中表單發生的操作。被 react 以這種方式控制取值的表單輸入元素就叫做「受控元件」。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
<
!-- 引入react的相關外掛程式 --
>
"./js/react.development.js"
>
<
/script>
"./js/react-dom.development.js"
>
<
/script>
"./js/babel.js"
>
<
/script>
document<
/title>
<
/head>
"box"
>
<
/div>
"text/babel"
>
class
extends
react.component
}handlechange
=(e)
=>)}
render()
onchange=
/>
<
/p>
<
/div>)}
} reactdom.
render
(>
, document.
getelementbyid
("box"))
<
/script>
<
/body>
<
/html>
這使得 react 的 state 成為唯一資料來源。由於 handlechange 在每次按鍵時都會執行並更新 react 的 state，
因此顯示的值將隨著使用者輸入而更新。
效果：
非受控元件：這時表單資料將交由 dom 節點來處理。非受控元件示例：要編寫乙個非受控元件，而不是為每個狀態更新都編寫資料處理函式，你可以 使用 ref 來從 dom 節點中獲取表單資料。
class
extends
react.component
handlesubmit
= e=>
render()
>
"text" ref=
/>
<
/label>
"submit" value=
"submit"
/>
<
/form>)}
} reactdom.
render
(>
,document.
getelementbyid
("box"))
;
總結：
react 有兩種不同的方式來處理表單輸入。
如果乙個 input 表單元素的值是由 react 控制，就其稱為受控元件。當使用者將資料輸入到受控元件時，會觸發修改狀態的事件處理器，這時由你的**來決定此輸入是否有效（如果有效就使用更新後的值重新渲染）。如果不重新渲染，則表單元素將保持不變。
乙個非受控元件，就像是執行在 react 體系之外的表單元素。當使用者將資料輸入到表單字段（例如 input，dropdown 等）時，react 不需要做任何事情就可以對映更新後的資訊。然而，這也意味著，你無法強制給這個表單字段設定乙個特定值。
在大多數情況下，你應該使用受控元件。
受控元件與非受控元件
受控元件與非受控元件 是否受狀態控制。我們來實現乙個react的雙向資料繫結 讓輸入框輸入值，下面的顯示跟著變化 import react,from react import reactdom from react dom class input extends component render r...
受控元件 非受控元件
宣告，本部落格摘自 表單元件像 input textarea 不同於其它的原生元件，因為它們會隨著使用者互動而改變。這些元件提供了介面方便我們管理這些互動。互動屬性 表單元件提供了一些受使用者互動影響的屬性 受控元件 設定了value的input就是乙個受控元件。input裡會一直展現這個值 var...
react受控元件與非受控元件
在html中，標籤input textarea select的值的改變通常是根據使用者輸入進行更新。在react中，可變狀態通常儲存在元件的狀態屬性中，並且只能使用 setstate 更新，而呈現表單的react元件也控制著在後續使用者輸入時該表單中發生的情況，以這種由react控制的輸入表單元素而...