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:valuev-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表单实现了类似Vuev-model指令功能,其他表单对象可以仿照实现。

阅读 2.5k

推荐阅读
有为法
用户专栏

前端知识边学变写,为自己积累,也希望能为别人解惑。

8 人关注
10 篇文章
专栏主页