react表单双向绑定处理

react中处理表单双向绑定的方法：

 constructor() {super()this.state = {commentData: [{name: '冯昕',text: '说自己是大帅哥',id: 1}],addComponentPerson: '',addComponentValue: '',}}getCommentValue = (e) => {var targetName = e.target.name;var targetValue = e.target.value;this.setState({[targetName]:targetValue},()=>{console.log(this.state)})}<div className="commentName"><input type="text" placeholder="请输入评论人" name = "addComponentPerson" value = {this.state.addComponentPerson} onChange={this.getCommentValue}></input></div><div className="commentText"><textarea placeholder="请输入评论内容" name = "addComponentValue" value = {this.state.addComponentValue} onChange={this.getCommentValue}></textarea></div>

其实和vue很像，就是绑定input的value属性为state的值，给所有的表单元素添加一个表单事件，通过target.name的值来和state形成双向绑定。

代码片段中的getCommentValue事件取代了以往每个input元素都绑定一个相应的事件，那样会很繁琐，就像下面这样：

 constructor() {super()this.state = {commentData: [{name: '冯昕',text: '说自己是大帅哥',id: 1}],addComponentPerson: '',addComponentValue: '',}}getCommentPerson = (e) => {this.setState({addComponentPerson.target.value;})}getCommentValue = (e) => {this.setState({addComponentValue:e.target.value;})}<div className="commentName"><input type="text" placeholder="请输入评论人" name = "addComponentPerson" value = {this.state.addComponentPerson} onChange={this.getCommentPerson}></input></div><div className="commentText"><textarea placeholder="请输入评论内容" name = "addComponentValue" value = {this.state.addComponentValue} onChange={this.getCommentValue}></textarea></div>

特此记录~~~~，研究了好久…

react表单双向绑定处理相关推荐

02.Vue3 基础语法：常用语法、列表渲染、事件绑定和表单双向绑定
Vue3 基础语法 1. Vue 中应用和组件的基础概念 createApp createApp 表示创建一个 Vue 应用,存储在 app 变量中. 传入的参数表示,这个应用最外层的组件,应该如何展 ...
vue-07 表单双向绑定-视频自学
01 v-model 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select>元素上创建双向数据绑定.它会根据控件类型自 ...
Vue表单双向绑定显示，小程序水果外卖水果外卖模式水果外卖怎么做做个水果蔬菜配送的小程序外卖水果小程序水果店小程序门店
<div id="app"><p>input 元素:</p><input v-model="message" plac ...
Vue表单输入绑定(元婴中期)
表单输入绑定基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自 ...
React 表单源码阅读笔记
1 概念 1.1 什么是表单实际上广义上的表单并不是特别好界定,维基上讲表单是一系列带有空格的文档,用于输写或选择.更具体的,在网页中表单主要负责数据采集的功能,我们下文中所提到的表单都指后者.如下 ...
uniapp 输入法画面_表单输入绑定 · uni-app跨平台移动应用开发 · 看云
# 表单输入绑定 ## [基础用法](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 &qu ...
React 表单与事件
一个简单的实例在实例中我们设置了输入框 input 值value = {this.state.data}.在输入框值发生变化时我们可以更新 state.我们可以使用 onChange 事件来监听 i ...
Vue007_ 表单输入绑定
表单输入绑定使用 v-model 对表单数据自动收集 1) text/textarea 2) checkbox 3) radio 4) select <!DOCTYPE html> & ...
Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

react表单双向绑定处理

react中处理表单双向绑定的方法：

react表单双向绑定处理相关推荐

最新文章

热门文章