拿到組件的節(jié)點(diǎn)
通過(guò)ref屬性驾锰，然后調(diào)用React.findDOMNode("ref_name");
var FormComponet = React.createClass({
handleSubmit:function () {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的寫(xiě)法 ref類(lèi)似于id
var text = this.refs.input_name.value;
},
render:function () {
return <form onSubmit={this.handleSubmit}>
<input type="text" ref="input_name" defaultValue="Hello..."/>
</form>
}
})
ReactDOM.render(<FormComponet name="I Love You"/>,document.getElementById("mydiv"));
可控組件如果要想拿到節(jié)點(diǎn)的數(shù)據(jù)，是通過(guò)操作DOM來(lái)拿數(shù)據(jù)走越。
不可控組件
//不可控組件 類(lèi)似于MVVM data binding
var FormComponet = React.createClass({
getInitialState:function () {
return {text:''}
},
handleSubmit: function (e) {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的寫(xiě)法 ref類(lèi)似于id
// var text = this.refs.input_name.value;
alert(this.state.text);
},
handleChange:function (e) {
this.setState({text:e.target.value})
},
render: function () {
return <form onSubmit={this.handleSubmit}>
<input type="text" onChange={this.handleChange} defaultValue="Hello..." ref="input_name"/><br/>
<button type="submit">提交</button>
</form>
}
})
不可控組件是將節(jié)點(diǎn)的值保存到state中椭豫，在需要的時(shí)候從state中獲取。實(shí)質(zhì)上是通過(guò)事件監(jiān)聽(tīng)進(jìn)行數(shù)據(jù)綁定旨指。
事件處理函數(shù)的復(fù)用
1赏酥、通過(guò)bind函數(shù)
var FormComponet = React.createClass({
handleSubmit: function (e) {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的寫(xiě)法 ref類(lèi)似于id
// var text = this.refs.input_name.value;
console.log(this.state);
},
getInitialState:function () {
return {
username:'',
gender:0,
agree:false
}
},
handleChange:function (key,e) {
//key為bind(this,'')函數(shù)的第一個(gè)參數(shù),為組件的對(duì)象,第二個(gè)參數(shù)是key的別名
e.preventDefault();
// alert(key);
var obj = {}
obj[key] = e.target.value;
this.setState(obj);
},
render: function () {
return <form onSubmit={this.handleSubmit}>
<label htmlFor="username">請(qǐng)輸入用戶(hù)名：</label>
<input id="username" type="text" onChange={this.handleChange.bind(this,'username')}/><br/>
<label htmlFor="gender">請(qǐng)選擇性別：</label>
<select id="gender" onChange={this.handleChange.bind(this,'gender')}>
<option value="0">男</option>
<option value="1">女</option>
</select><br/>
<label htmlFor="agree">是否同意：</label>
<input id="agree" type="checkbox" onChange={this.handleChange.bind(this,'agree')}/><br/>
<button type="submit">提交</button>
</form>
}
})
2、通過(guò)name 的屬性的值谆构，通過(guò)e.target.name拿到組件再拿到內(nèi)容
var FormComponet = React.createClass({
handleSubmit: function (e) {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的寫(xiě)法 ref類(lèi)似于id
// var text = this.refs.input_name.value;
console.log(this.state);
},
getInitialState:function () {
return {
username:'',
gender:0,
agree:false
}
},
handleChange:function (e) {
//key為bind(this,'')函數(shù)的第一個(gè)參數(shù),為組件的對(duì)象,第二個(gè)參數(shù)是key的別名
e.preventDefault();
// alert(key);
var obj = {}
obj[e.target.name] = e.target.value;
this.setState(obj);
},
render: function () {
return <form onSubmit={this.handleSubmit}>
<label htmlFor="username">請(qǐng)輸入用戶(hù)名：</label>
<input id="username" type="text" name="username" onChange={this.handleChange}/><br/>
<label htmlFor="gender">請(qǐng)選擇性別：</label>
<select id="gender" onChange={this.handleChange} name="gender">
<option value="0">男</option>
<option value="1">女</option>
</select><br/>
<label htmlFor="agree">是否同意：</label>
<input id="agree" type="checkbox" onChange={this.handleChange} name="agree"/><br/>
<button type="submit">提交</button>
</form>
}
})
ReactDOM.render(<FormComponet name="I Love You"/>, document.getElementById("mydiv"));
