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