React之受控元件與非受控元件

2021-10-04 07:48:27 字數 1342 閱讀 7107

受控元件

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

class

combox

extends

react.component

}//通過onchange觸發事件來改變state中儲存的value值

inputchange

=(e)

=>)}

render()

onchange=

>

<

/input>

<

/div>

"text"

/label>

//input的value值必須是我們設定在constructor建構函式的state中的值

'text' value=

onchange=

>

<

/input>

<

/div>

>提交<

/button>

<

/div>)}

}

非受控元件:通過建立乙個ref引用,表單資料交給dom來處理

class

combox

extends

react.component

//第一步:建立ref引用

this

.uservalue=react.

createref()

this

.textvalue=react.

createref()

}//提交更新資料

listchange=(

)=>

)this

.uservalue.current.value=

this

.textvalue.current.value=''}

}render()

>

<

/input>

<

/div>

"text"

/label>

'text' ref=

>

<

/input>

<

/div>

>提交<

/button>

<

/div>)}

}

react受控元件與非受控元件

在html中,標籤input textarea select的值的改變通常是根據使用者輸入進行更新。在react中,可變狀態通常儲存在元件的狀態屬性中,並且只能使用 setstate 更新,而呈現表單的react元件也控制著在後續使用者輸入時該表單中發生的情況,以這種由react控制的輸入表單元素而...

react受控元件與非受控元件

一 受控元件 或都要繫結乙個change事件 每當表單的狀態發生變化,都會被寫入元件的state中,這種元件在react中被稱為受控元件 在受控元件中,元件渲染出的狀態與它的value或者checked prop向對應.react通過這種方式消除了元件的區域性狀態,是的應用的整個狀態可控.react...

react受控元件與非受控元件

非控元件 input textarea等普通元素預設是非受控元件 輸入框內部的值是使用者控制和react無關 這種簡單的input就是非控元件 受控元件 受控元件就是可以被 react 狀態控制的元件 input textarea等普通元素通常onchange 事件獲取當前輸入內容使用setstat...