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