React表單應用 不可控元件

2021-08-16 12:46:52 字數 1885 閱讀 5913

在input標籤中不把value繫結到state上的就是不可控元件,它的資料不合state對應,所以在開發時會給自己挖很多坑,但是不可控元件並不是不可掌控。

先來做乙個最簡單的不可用元件。

render

:function

() ,

元件完成之後給它加上乙個onchange事件,發現是可以監控到變化值的。如果要獲得iput中的value值,需先拿到其dom節點,然後獲取其value值。

學習react

title

>

head

>

<

body

>

<

div

id="reactcontainer"

>

div>

<

script

src=

"react.js"

>

script

>

<

script

src=

"react-dom.js"

>

script

>

<

script

src=

"">

script

>

<

script

type=

"text/babel"

>

var

myform =

react.

createclass(

},handlechange

:function

(event

) ,render

:function

() />

div>)},

});reactdom.

render

(<

myform

/>

,document.

getelementbyid

('reactcontainer'));

script

>

body

>

html

>

元件完成之後給它加上乙個onchange事件,發現是可以監控到變化值的。如果要獲得iput中的value值,需先拿到其dom節點,然後獲取其value值。

當然我們也可以給input加入預設值,但是不是value了,而是defaultvalue。

<

input

type=

"text"

ref=

"dream"

onchange=

defaultvalue=

"預設值

"/>

react可控元件和不可控元件

在react中的input標籤是有些小坑的,input本身就有自己的快取機制,然後react的state也有快取機制。這兩種快取機制我們在編碼中是要進行取捨的。將input中的value繫結到state的react元件就是可控元件,反之則是不可控元件。先看乙個不可控的input 測試效果用 impo...

React的可控元件和不可控元件

type text value 像這個 中,我們可以看出,value的值是由狀態來確定的,只要拿到this.state.helloto的值就可以。demo charset utf 8 可控元件title src js react.js script src js react dom.js scrip...

React中的表單元件

表單是前端非常重要的一塊內容,並且往往包含了錯誤校驗等邏輯。react對表單元素做了專門的優化處理,他對表單元素做了一些抽象,使得他們的使用方式更統一更規範。表單裡面出來了乙個新的概念叫 約束性元件 那麼如何理解約束性元件和非約束性元件呢。約束性元件,簡單的說,就是由react管理了它的value,...