React学习笔记（3）—— 获取元素节点实现双向绑定

react中获取元素节点方法至少有三种：
1，通过原生js的api获取
2，通过事件源获取
3，通过refs获取（react官方推荐）

下面将分别通过上述三种方法实现一个双向绑定的案例：将一个输入框中输入的值显示出来，显示的值跟随者输入框值的变化而改变，效果如下：

以上效果关键代码如下：

class Oppo extends React.Component {
    constructor() {
        super()
        this.state = {
            msg: ''
        }
    }
    render() {
        return <div>
                    <input type="text" onInput={this.change.bind(this)} id="inputnode" ref="huz"/>
                    <br/>
                    <span>{this.state.msg}</span>
                </div>
    }
    change(e) {
        // 第一种方法：通过id用原生api获取输入框的值
        // console.log(inputnode.value)

        //第二种方法：通过事件源获取输入框的值
        // console.log(e.target.value)

        //第三种方法：通过refs获取输入框的值（需要在输入框标签设置ref属性值）
        console.log(this.refs.huz.value)
        
        this.setState({
            msg: this.refs.huz.value
        })
    }
}     
ReactDOM.render(<Oppo />, app)