React 可控不可控组件

拿到组件的节点

通过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 

            
        
    }
})
ReactDOM.render(,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 

            

            提交
        
    }
})

不可控组件是将节点的值保存到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 

            请输入用户名：
            

            请选择性别：
            
                男
                女
            

            是否同意：
            

            提交
        
    }
})

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 

            请输入用户名：
            

            请选择性别：
            
                男
                女
            

            是否同意：
            

            提交
        
    }
})
ReactDOM.render(, document.getElementById("mydiv"));