用过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指令功能，其他表单对象可以仿照实现。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5211