【React+AntD】3、时隔多年之后绑定文本框与 state 中的值(双向数据绑定)

最新推荐文章于 2024-05-10 19:54:10 发布

BMG-Princess

最新推荐文章于 2024-05-10 19:54:10 发布

阅读量544

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/Hei_lovely_cat/article/details/108795147

版权

11 篇文章 0 订阅

订阅专栏

在 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
   })
 }

写法二：

<Input placeholder="请输入用户名" value={this.state.userName}
 onChange={e => this.setState({userName:e.target.value})}/>

推荐写法二，简单大方！

关注