拿到组件的节点
通过ref属性，然后调用React.findDOMNode("ref_name");
var FormComponet = React.createClass({
handleSubmit:function () {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的写法 ref类似于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"));
可控组件如果要想拿到节点的数据，是通过操作DOM来拿数据。
不可控组件
//不可控组件 类似于MVVM data binding
var FormComponet = React.createClass({
getInitialState:function () {
return {text:''}
},
handleSubmit: function (e) {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的写法 ref类似于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>
}
})
不可控组件是将节点的值保存到state中，在需要的时候从state中获取。实质上是通过事件监听进行数据绑定。
事件处理函数的复用
1、通过bind函数
var FormComponet = React.createClass({
handleSubmit: function (e) {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的写法 ref类似于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,'')函数的第一个参数,为组件的对象,第二个参数是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">请输入用户名：</label>
<input id="username" type="text" onChange={this.handleChange.bind(this,'username')}/><br/>
<label htmlFor="gender">请选择性别：</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、通过name 的属性的值，通过e.target.name拿到组件再拿到内容
var FormComponet = React.createClass({
handleSubmit: function (e) {
e.preventDefault();
// React.findDOMNode("input_name");
//react里面的写法 ref类似于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,'')函数的第一个参数,为组件的对象,第二个参数是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">请输入用户名：</label>
<input id="username" type="text" name="username" onChange={this.handleChange}/><br/>
<label htmlFor="gender">请选择性别：</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"));
