拿到組件的節(jié)點(diǎn)

通過ref屬性，然后調(diào)用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"));

可控組件如果要想拿到節(jié)點(diǎn)的數(shù)據(jù)，是通過操作DOM來拿數(shù)據(jù)。

不可控組件

//不可控組件 類似于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>
    }
})

不可控組件是將節(jié)點(diǎn)的值保存到state中，在需要的時(shí)候從state中獲取。實(shí)質(zhì)上是通過事件監(jiān)聽進(jìn)行數(shù)據(jù)綁定。

事件處理函數(shù)的復(fù)用

1、通過bind函數(shù)

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,'')函數(shù)的第一個(gè)參數(shù),為組件的對(duì)象,第二個(gè)參數(shù)是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">請(qǐng)輸入用戶名：</label>
            <input id="username" type="text" onChange={this.handleChange.bind(this,'username')}/><br/>
            <label htmlFor="gender">請(qǐng)選擇性別：</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拿到組件再拿到內(nèi)容

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,'')函數(shù)的第一個(gè)參數(shù),為組件的對(duì)象,第二個(gè)參數(shù)是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">請(qǐng)輸入用戶名：</label>
            <input id="username" type="text" name="username" onChange={this.handleChange}/><br/>
            <label htmlFor="gender">請(qǐng)選擇性別：</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"));