React input表单双向数据绑定仿Vue v-model实现

用过Vue的同窗都知道，Vue里<input> 、 <textarea> 及 <select>等表单元素能够经过v-model指令实现双向数据绑定，也就是说，当用户经过交互改变表单的值时，表单绑定的数据也会同步响应，这一点也是Vue对开发人员很是友好的点之一。

然而当咱们初学React的时候，就会发现React并不提供数据双向绑定功能。也就是说，以<input>为例，咱们能够经过setState命令改变input绑定的数据，从而改变input的值，可是用户填写input表单并不能改变input绑定的数据。

可是其实在Vue中，input等表单元素的双向数据绑定也不是Vue框架本有的功能，v-model双向数据绑定说到底其实不过是Vue为咱们提供的语法糖。也就是说，v-model实际上是合并了v-bind:value和v-on:input两条指令，把数据绑定和用户输入事件集成到了一块儿。

根据这个原理，咱们也能够为React来添加input的双向数据绑定功能。

1，在constructor里设置input绑定数据对象msg的初始值

constructor(props) {
    super(props);
    this.state = {
      msg: 'hello'
    }
  }

2，给input表单元素绑定数据对象msg，下面一个<p>标签里也绑定数据对象msg，以监测显示数据的变化

<input value={this.state.msg} />
   <p>{this.state.msg}</p>

3，给input表单添加输入事件监听动做，在用户输入的时候同步绑定数据

<input value={this.state.msg} onChange={e => this.setState({msg:e.target.value})} />

至此，咱们在React里也为input表单实现了相似Vue的v-model指令功能，其余表单对象能够仿照实现。