绑定文本框与state中的值（单向数据流）

上文已提到：

1. 在 Vue 中，默认提供了v-model指令，可以很方便的实现 数据的双向绑定；
2. 但是，在 React 中，默认只是单向数据流，也就是 只能把 state 上的数据绑定到 页面，无法把 页面中数据的变化，自动同步回 state ； 如果需要把 页面上数据的变化，保存到 state，则需要程序员手动监听onChange事件，拿到最新的数据，手动调用this.setState({ }) 更改回去；
3. 案例：绑定文本框与state中的值（单向数据流）两种方式

• 方案1： 通过 事件参数 e 来获取
• 方案2： 通过 ref 来获取

export default class BindEvent extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: '你看，城南的花都开了，该你熬的也都熬过来了，所也别不高兴了'
        }
    }

    render() {
        return <div>
            <h3>{this.state.msg}</h3>
            <input className="form-control" type="text" value={this.state.msg} readOnly/>
            <h3>获取input框中的值</h3>
            <br/>
            <h4>方案1： 通过 事件参数 e 来获取</h4>
            <input className="form-control" type="text" value={this.state.msg} onChange={
                (e) => this.txtChanged(e)
            }/>
            <h4>方案2： 通过 ref 来获取</h4>
            <input className="form-control" type="text" value={this.state.msg} ref="txt" onChange={
                () => this._txtChanged()
            }/>
        </div>
    }
//方案1： 通过 事件参数 e 来获取
    txtChanged = (e) => {
        const newVal = e.target.value;
        this.setState({
            msg: newVal
        })
    };
//方案2： 通过 ref 来获取
    _txtChanged = () => {
        const newVal = this.refs.txt.value;
        this.setState({
            msg: newVal
        })
    };
}