在input標籤中不把value繫結到state上的就是不可控元件,它的資料不合state對應,所以在開發時會給自己挖很多坑,但是不可控元件並不是不可掌控。
先來做乙個最簡單的不可用元件。
render元件完成之後給它加上乙個onchange事件,發現是可以監控到變化值的。如果要獲得iput中的value值,需先拿到其dom節點,然後獲取其value值。: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
>
當然我們也可以給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,...