React 实现双向绑定

何为双向绑定？其实就是改变model层能自动改变view层，view层改变model层也能自动改变。
React已经实现了改变model层能自动改变view层，所以我们要做的就是改变view层能自动改变model层。

在React当中，有个onChange属性，可以给input绑定事件，当input框里的值发生变化时会触发调用方法。

初始页面
改变input的值，上面的显示文字也会变
点击按钮，input与上面的显示文字都改变了

一、通过事件对象获取值

event.target.value可以获取到input框的值。

具体实现步骤可拆分为：
1.给input定义value属性，值为state的msg，即value={this.state.msg}，是为了保证初始页面时，两值相等。
2.给input定义onChange属性，值为当前React组件里的方法inputChange，即onChange={this.inputChange}。
3.inputChange方法中通过event.target.value方法获取到当前input的值，并赋值给state的msg。

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    inputChange = (event) => {
        this.setState({
            msg: event.target.value
        })
    }
    render() {
        return (
            <div>
                <h2>input框的值是：{this.state.msg}</h2>
                <input onChange={this.inputChange} value={this.state.msg}/>
            </div>
        )
    }
}

二、通过ref来获取

ref可以获取到当前元素的DOM节点。

具体实现步骤可拆分为：
1.给input定义value属性，值为state的msg，即value={this.state.msg}，是为了保证初始页面时，两值相等。
2.给input定义ref属性，即ref="msgInput"。
3.inputChange方法中通过this.refs.msgInput获取到当前input的DOM节点，并赋值给state的msg。

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    inputChange = () => {
        this.setState({
            msg: this.refs['msgInput'].value
        })
    }
    changeMSG = () => {
        this.setState({
            msg: '1233211234567'
        })
    }
    render() {
        return (
            <div>
                <h2>input框的值是：{this.state.msg}</h2>
                <input ref="msgInput" onChange={this.inputChange} value={this.state.msg}/>
                <button onClick={this.changeMSG}>值为1233211234567</button>
            </div>
        )
    }
}