前端之家收集整理的这篇文章主要介绍了
react 不可控组件与可控组件的区别，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
/**
* Created by fanxiaole on 17/3/24.
*/
//不可控组件 和 可控组件的区别
// 不可控组件是利用 react.findDOMNode(""); 为了跨平台 尽量减少对dom的操作
/*
var FormInputComponent = React.createClass({
handleSubmit : function (e) {
e.preventDefault();
var text = this.refs.user_name.value;
alert(text);
},render(){
return <form onSubmit={this.handleSubmit}>
<input type="text" defaultValue="fuck..." ref="user_name" />
<button type = "submit">提交</button>
</form>
}
});
*/
//可控组件 利用回调函数来获取子控件的值
var FormInputComponent = React.createClass({
getInitialState: function(){
return {text : ''};
},handleChange : function (e) {
console.log("修改值:"+e.target.value);
this.setState({text : e.target.value})
},handleSubmit : function (e) {
e.preventDefault();
alert(this.state.text);
},render(){
return <form onSubmit={this.handleSubmit}>
<input type="text" defaultValue="fuck..." onChange = {this.handleChange} />
<button type = "submit">提交</button>
</form>
}
});
ReactDOM.render(<FormInputComponent/>,document.getElementById("myDiv"));
