/** * 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"));