在react中绑定文本框与 state 中的值(双向数据绑定)
在 Vue 中,默认提供了 v-model 指令,可以很方便的实现 数据的双向绑定;但是,在 React 中没有双向数据绑定指令,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ;如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听文本框的 onChange 事件,拿到最新的数据,手动调用 this.setSta...
·
-
在 Vue 中,默认提供了 v-model 指令,可以很方便的实现 数据的双向绑定;
-
但是,在 React 中没有双向数据绑定指令,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ;
-
如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听文本框的 onChange 事件,拿到最新的数据,手动调用 this.setState({ }) 更改回去;
-
页面的UI结构:
<input value={this.state.msg} onChange={ e => this.txtChanged(e) }></input>
- onChange 的事件处理函数:
// 文本框内容改变时的处理函数
txtChanged = e => {
this.setState({
msg: e.target.value
})
}
更多推荐
已为社区贡献18条内容
所有评论(0)