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

2024年2月7日 212次阅读 来源: 岗伯伯

用过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://segmentfault.com/a/1190000020329465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞