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

上文已提到：

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