React中的受控元件和非受控元件

2021-10-05 04:56:34 字數 938 閱讀 4627

官方對於受控元件和非受控元件的描述:

受控元件

如上述這樣寫會報錯的,如果用狀態去控制輸入框,這樣是沒有辦法去控制輸入框輸入的值,是輸入不了內容的,要配合乙個onchange事件來控制這輸入框的值

糾正錯誤的**

constructor()}

handlechange =

(e)=

>)}

render(

) onchange=

type=

"text" />

)}} reactdom.render(

))由於在輸入框元素上設定了 value 屬性,因此顯示的值將始終為 this.state.value,這使得 react 的 state 成為唯一資料來源。由於 handlechange 在每次按鍵時都會執行並更新 react 的 state,因此顯示的值將隨著使用者輸入而更新。

對於受控元件來說,輸入的值始終由 react 的 state 驅動。你也可以將 value 傳遞給其他 ui 元素,或者通過其他事件處理函式重置,但這意味著你需要編寫更多的**。

非受控元件

使用ref從dom節點獲取表單元素

handlesubmit =

(e)=

>

render(

)>

"text" ref=

/>

"submit" />

)}} reactdom.render(

))

react中的受控和非受控元件

假設我們現在有乙個表單,表單中有乙個input標籤,input的value值必須是我們設定在constructor建構函式的state中的值,然後,通過onchange觸發事件來改變state中儲存的value值,這樣形成乙個迴圈的迴路影響。也可以說是react負責渲染表單的元件仍然控制使用者後續輸...

React中的受控元件和非受控元件

資料繫結在表單標籤上,必須繫結state的值,不能是普通的值 然後需要實現表單的change事件,在事件中接收ev,獲得表單的value值 ev.target.value 將接收到的value值設定給state上,state變了,介面就會變 constructor render 獲取 changea...

react中的受控元件,非受控元件

剛開始react的時候就接觸到受控元件和非受控元件這個概念,然後那個時候長用的元件,比如input,select都是屬於受控元件。受控元件 非受控元件 顧名思義,就是不受state的狀態值改變而改變,只是具有乙個類似於defaultvalue這樣的初始值來設定狀態,或者說只接受props的改變而改變...