在react中实现一个简单双向数据绑定

vlambda
2020-07-11

在react中实现一个简单双向数据绑定

vue中的双向数据绑定非常的方便，那么如何在react中实现一个简单的双向数据绑定呢？

react实现一个简单的双向绑定

首先我们在input中添加一个onChange事件，然后把这个输入框的value绑定到state中

<Input placeholder="商品名" onChange={this.ProductName.bind(this)} value={this.state.inpValu}/>

constructor(props) { super(props) this.state = { inpValu:"" } }

这个onChange事件会在这个input的值改变后触发，同时返回值，其中这个值的target下的value就是这个input当前的值，这样的话我们就只需要将这个值设置到state里input的value绑定的值就好了。

ProductName(e){ this.setState({ inpValu:e.target.value }) }

这样的话就可以实现input的value的值改变，state中的值也会改变。state的值改变，input的value值也改变这样一个简单的双向数据绑定。

值得注意的是: 通过setState来修改state的值的话，它是异步的。想要设置完后就获取里面的值需要在它第二个参数中传递一个回调函数，在这个回调中可以获取修改完的值

chongZhi (){   this.setState({ProductName:""},function () { console.log(this.state.ProductName); })}

封装事件处理

如果一个页面表单元素太多，每一个写一个change对应的事件处理方法，重复代码太多，你会发现不同的元素，事件处理程序，只是setState对应的键名不同，那可以考虑封装？

思路：全都用一个事件处理程序，传不同的值进去就好了

代码如下：

constructor(){ super() this.changeHandle = this.changeHandle.bind(this); this.state={ name:"", pwd:"", email:"" } }

render(){ let {name,pwd,email} = this.state; return ( <div> <input data-key="name" onChange={this.changeHandle} value={name} type="text" />           <input data-key="pwd" onChange={this.changeHandle}  value={pwd} type="text" />           <input data-key="email" onChange={this.changeHandle } value={email}  type="text"/> <span>name:{name}</span> <span>pwd:{pwd}</span> <span>email:{email}</span> </div> )}

changeHandle(e){ e.preventDefault() let key = e.target.dataset.key; this.setState({[key]:e.target.value}) }

vlambda博客
学习文章列表