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