不可控元件和可控元件介紹
不可控元件
如下：
例項：
var myform = react.createclass(
event.preventdefault();
var helloto = reactdom.finddomnode(this.refs.helloto).value;
alert(helloto);
},render:function ()
});reactdom.render(,document.body);
可控元件
如下：
這樣寫 要獲取input的輸入值就
var inputvalue = this.state.value
例項：var myform = react.createclass(
},handlechange:function (event) )
},handlesubmit:function (event) ,
render:function ()
});reactdom.render(,document.body);
不同表單元素的使用
首先看有那些常見的表單元素
1、name標籤作用是指明乙個input 或者checkbox或等等是做什麼用的 label標籤有個比較重要的屬性是for 對應的值是另乙個元素的id
2、
3、
4、
一
二
表單元素例項
var myform = react.createclass(
},handlesubmit:function (event) ,
handlenamechange:function (event) )
},handle***change:function (event) )
},handlecheckedchange:function (event) )
},render:function ()
});
復用的兩種方式：
一：bind復用
寫函式時要有兩個引數 第乙個通常是name 第二個 event
handlechange:function(name,event)
呼叫時有兩個引數 乙個是this另乙個是字串 指明是誰呼叫
例項：
//事件處理函式的復用----bind復用
var myform = react.createclass(
},handlechange:function (name,event)
newstate[name] = name == 'checked' ? event.target.checked :event.target.value;
this.setstate(newstate);
},handlesubmit:function (event) ,
render:function ()
});
給元素新增name
建構函式：
handlechange:function(event)
呼叫函式
例項：
//事件處理函式的復用----name復用
var myform = react.createclass(
},handlechange:function (event)
newstate[event.target.name] = event.target.name == 'checked' ? event.target.checked :event.target.value;
this.setstate(newstate);
},handlesubmit:function (event) ,
render:function ()
});
react表單處理
input textarea 1.狀態屬性 value,checked,selected 2.事件屬性 onchange,react支援domlevel3定義的所有表單事件 import react,from react export default class myform extends com...
React 表單操作
使用者在表單填入的內容，屬於使用者跟元件的互動，所以不能用this.props讀取 上面 中，文字輸入框的值，不能用this.props.value讀取，而要定義乙個onchange事件的 函式，通過event.target.value讀取使用者輸入的值。textarea元素 select元素 ra...
React中的表單元件
表單是前端非常重要的一塊內容，並且往往包含了錯誤校驗等邏輯。react對表單元素做了專門的優化處理，他對表單元素做了一些抽象，使得他們的使用方式更統一更規範。表單裡面出來了乙個新的概念叫 約束性元件 那麼如何理解約束性元件和非約束性元件呢。約束性元件，簡單的說，就是由react管理了它的value，...