当前位置：首页 > news >正文

React的表单数据绑定

news 2025/11/19 10:13:49

当我们在页面中使用表单提交数据时,react是如何拿取表单数据的呢

这里通过两种方式来实现

非受控组件实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script src="../js/babel.min.js"></script><body><div id="test"></div></body>
<!-- 这里一定要指明是babel类型 -->
<script type="text/babel">//类式创建虚拟domclass MyCompent extends React.Component{//自定义提交方法handleSubmit=(event)=>{event.preventDefault();//阻止表单提交//解构赋值const {username,pwd} = this;alert(`用户名是${username.value},密码是${pwd.value}`)}render(){return (<div><h1>非受控组件获取表单数据</h1><form onSubmit={this.handleSubmit}><input ref={c => this.username = c} name='username'/><br/><input name='pwd' ref={c=>this.pwd = c}/>   <button>提交</button><br/></form></div>)}
}//渲染 组件到页面ReactDOM.render(<MyCompent/>,document.getElementById('test')) </script></html>

可以看到这里的非受控组件form表单,我们通过react的refs属性来获取标签的value值,然后直接从refs中拿取value值即可

受控组件实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script src="../js/babel.min.js"></script><body><div id="test"></div></body>
<!-- 这里一定要指明是babel类型 -->
<script type="text/babel">//类式创建虚拟domclass MyCompent extends React.Component{//初始化状态存储数据state ={username:'',pwd:''}//更新用户名字段数据到状态中updateUserName = (event)=>{console.log(event.target.value)this.setState({username:event.target.value})}//更新密码字段数据到状态中updatePwd = (event)=>{this.setState({pwd:event.target.value})}//自定义提交方法handleSubmit=(event)=>{event.preventDefault();//阻止表单提交//解构赋值const {username,pwd} = this;alert(`用户名是${this.state.username},密码是${this.state.pwd}`)}render(){return (<div><h1>受控组件获取表单数据</h1><form onSubmit={this.handleSubmit}><input onChange={this.updateUserName} name='username'/><br/><input name='pwd' onChange={this.updatePwd}/>   <button>提交</button><br/></form></div>)}
}//渲染 组件到页面ReactDOM.render(<MyCompent/>,document.getElementById('test')) </script></html>

受控组件可以脱离refs的使用,主要是使用state属性初始化数据,然后直接绑定文本框的内容更改事件,在文本框内容更改时,直接更新state中相对应的属性值,如果学过vue的应该都会想到vue的双向绑定,没错,这里的这个写法可以理解为是vue双向绑定的原理,只不过vue底层帮我们实现了这个写法

有一个很形象的比喻: react是手动挡,vue是自动挡

高阶函数:

如果一个函数符合下面两个规范中的任何一个那么该函数就是高阶函数

1 若A函数接收的参数是一个函数那么A就可以称为高阶函数

2 若A函数调用后的返回值仍然是一个函数那么A就可以称为高阶函数

使用高阶函数优化前面的受控组件实现方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转为js -->
<script src="../js/babel.min.js"></script><body><div id="test"></div></body>
<!-- 这里一定要指明是babel类型 -->
<script type="text/babel">//类式创建虚拟domclass MyCompent extends React.Component{//初始化状态存储数据state ={username:'',pwd:''}//更新密码字段数据到状态中updateData = (data)=>{console.log(data,event.target.value)return(event)=>{this.setState({[data]:event.target.value})}}//自定义提交方法handleSubmit=(event)=>{event.preventDefault();//阻止表单提交//解构赋值const {username,pwd} = this;alert(`用户名是${this.state.username},密码是${this.state.pwd}`)}render(){return (<div><h1>受控组件获取表单数据</h1><form onSubmit={this.handleSubmit}><input onChange={this.updateData('username')} name='username'/><br/><input name='pwd' onChange={this.updateData('pwd')}/>   <button>提交</button><br/></form></div>)}
}//渲染 组件到页面ReactDOM.render(<MyCompent/>,document.getElementById('test')) </script></html>

可以看到,原有的username和pwd的内容更改事件函数体结构一致,此时就可以用高阶函数形式进行优化

函数的柯里化

通过函数调用继续返回函数的形式实现多次接收参数最后统一处理的函数编码形式

传统写法:

柯里化写法:

外层函数的结果当做内层的调用

如果不使用柯里化书写上面的表单数据就是这样的

可以比较下两者的区别,柯里化还是非常方便的

React的表单数据绑定

当我们在页面中使用表单提交数据时,react是如何拿取表单数据的呢这里通过两种方式来实现非受控组件实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conte…...

编程日记 2023/5/30 6:47:15

Dubbo——微服务框架（单体式-＞分布式-＞微服务）

是什么？ Dubbo是阿里巴巴开源的基于Java的高性能RPC（一种远程调用）分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案，它提供了三大核心能力：面向接口的远程…...

编程日记 2023/5/30 6:47:12

【Spring Cloud】Feign传递HttpServletRequest

这里我的业务场景是：在请求头中获取服务端登录时传给客户端的token，并且客户端将token放在请求头中。以至于我需要在参数传递上传入HttpServletRequest。如果你非要向我一样传入HttpServletRequest对象那么就往下看，当然你如果可以改成其他参…...

编程日记 2023/5/30 6:47:10

烟火识别智能监测系统 yolov5

烟火识别智能监测系统基于pythonyolov5网络模型算法智能分析技术，烟火识别智能监测算法模型对现场画面进行实时分析，发现现场出现烟火立即抓拍实时告警。我们选择当下卷积神经网络YOLOv5来进行火焰识别检测。6月9日，Ultralytics公司开源了YOL…...

编程日记 2023/5/30 6:47:07

【Python入门】Python循环语句（while循环的基础语法）

前言 📕作者简介：热爱跑步的恒川，致力于C/C、Java、Python等多编程语言，热爱跑步，喜爱音乐的一位博主。 📗本文收录于Python零基础入门系列，本专栏主要内容为Python基础语法、判断、循环语句、函…...

编程日记 2023/5/30 6:47:06

JS中 Math 和 Number 内置对象常用的一些方法 Math.abs(num)Math.ceil(num)Math.floor(num)Math.max(num1, num2, ... , numN)Math.min(num1, num2, ... , numN)Math.pow(base, exponent)Math.random()Math.round(num)Math.sqrt(num)Number.toFixed(digits)Number.toString(rad…...

编程日记 2023/5/30 6:47:04

Docker的使用（1.什么是docker）

前言这个系列是我自己学习使用docker的记录和分享，作为一名开发人员，你需要了解这个东西并且学会它的简单使用，但是作为一名开发而不是运维，不要花过多的时间去深究它的原理，而是把它当作一个工具即可 docker Docke…...

编程日记 2023/5/30 6:47:01

ENVI无缝镶嵌Seamless Mosaic工具镶嵌、拼接栅格遥感影像（所有图像需要含有地理信息）

本文介绍基于ENVI软件，利用“Seamless Mosaic”工具实现栅格遥感影像无缝镶嵌的操作。在ENVI软件中通过“Pixel Based Mosaicking”工具实现栅格遥感影像的镶嵌的方法。这一工具虽然可以对不含有地理参考信息的遥感影像进行镶嵌，但是其镶嵌的整体效果并…...

编程日记 2023/5/30 6:46:59

Java-API简析_java.lang.Integer类（基于JDK1.8）（浅析源码）

编程日记 2023/5/18 8:18:24

WebSocket的那些事（3-STOMP实操篇）

目录一、序言二、STOMP详解1、STOMP简单介绍2、STOMP协议内容3、使用STOMP的好处三、代码示例1、Maven依赖2、开启WebSocket消息代理3、控制器4、前端页面greeting.html 四、测试1、连接服务端2、发送消息五、STOMP消息传播流程六、结语一、序言上节中我们在 WebSocket的…...

编程日记 2023/5/18 8:13:21

《花雕学AI》WeTab+ChatGPT：让浏览器变成你的智能助手

引言： 浏览器是我们日常使用的最重要的工具之一，它可以帮助我们获取信息、娱乐、学习、工作等。但是，传统的浏览器往往不能满足我们的个性化需求，也不能给我们提供智能化的服务。那么，有没有一种浏览器可以让我们的体…...

编程日记 2023/5/18 8:08:20

MySQL 字段为 NULL 的5大坑，大部分人踩过

数据库字段允许空值(null)的问题，小伙伴你遇到过吗？ 在验证问题之前，我们先建一张测试表及测试数据。构建的测试数据，如下图所示： 有了上面的表及数据之后，我们就来看当列中存在 NULL 值时，究…...

编程日记 2023/5/18 8:03:19

Android SystemUI篇(二)

目录一、简介二、SystemUI的架构三、SystemUI的主要组件四、SystemUI的主要功能五、SystemUI的自定义和定制六、SystemUI的性能优化一、简介 SystemUI是Android操作系统的一个关键组件，主要负责管理和提供用户界面的核心元素，如状态栏、导航…...

编程日记 2023/5/18 7:58:18

第六讲：“声音”写具体

爸爸又打呼了!“呼噜一呼噜一像一股巨浪腾空而起，以每秒八十米的速度向上冲刺，力图掀开天花板，掀翻整座住宅楼;“呼噜一一呼噜一-”，像一台轰鸣的坦克在穿行，床垫在抖动，吊灯在摇晃，墙灰在簌籁(…...

编程日记 2023/5/30 12:03:11

Unity 向量

向量的加减法本文就不再赘述了，本文侧重介绍脚本中的向量写法一、向量的数乘定义：k(x,y,z)(kx,ky,kz) 若向量长度为L，k取1/L，就恰好能让原向量长度变成1，变成了单位向量，这称为向量的标准化。由于长度…...

编程日记 2023/5/30 12:03:05

Apache Tomcat AJP协议文件读取与包含

永远也不要忘记能够笑的坚强，就算受伤，我也从不彷徨。 0x01.漏洞情况分析 Tomcat是Apache软件基金会Jakarta 项目中的一个核心项目，作为目前比较流行的Web应用服务器，深受Java爱好者的喜爱，并得到了部分软件开发商的…...

编程日记 2023/5/30 12:03:01

实验10 人工神经网络(1)

1. 实验目的 ①理解并掌握误差反向传播算法； ②能够使用单层和多层神经网络，完成多分类任务； ③了解常用的激活函数。 2. 实验内容 ①设计单层和多层神经网络结构，并使用TensorFlow建立模型，完成多分类任务&#xf…...

编程日记 2023/5/30 12:02:56

OPPO关停哲库业务，工程师造芯何去何从？

5月12日（上周五），新浪科技从OPPO处了解到，OPPO将终止ZEKU业务。3000多人团队突然原地解散，网上唏嘘声一片！ ZEKU最初成立于2019年，是OPPO的全资子公司，欧加集团百分之百注资成立。总…...

编程日记 2023/5/30 12:02:52

面试被问麻了....

前几天组了一个软件测试面试的群，没想到效果直接拉满，看来大家对面试这块的需求还是挺迫切的。昨天我就看到群友们发的一些面经，感觉非常有参考价值，于是我就问他还有没有。结果他给我整理了一份非常硬核的面筋，打开…...

编程日记 2023/5/30 12:02:44

AspNetCore中的配置文件详解

1 配置文件程序开发中，有些信息是要根据环境改变的，比如开发环境的数据库可能是本地数据，而生产环境下需要连接生产数据库，我们需要把这些信息放到程序外面，在程序运行时通过读取这些外部信息实现不改变程序代码适应…...

编程日记 2023/5/30 12:02:38

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/11/18 1:30:21

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/11/17 1:25:59

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2025/11/17 9:48:12

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/11/16 22:37:15

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器纯前端实现高延迟高流量帧率极低个人demo测试超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...

编程新知 2025/11/17 0:09:14

12.找到字符串中所有字母异位词

🧠 题目解析题目描述： 给定两个字符串 s 和 p，找出 s 中所有 p 的字母异位词的起始索引。返回的答案以数组形式表示。字母异位词定义： 若两个字符串包含的字符种类和出现次数完全相同，顺序无所谓，则互为…...

编程新知 2025/11/17 1:09:16

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...

编程新知 2025/11/17 8:56:08

基于SpringBoot在线拍卖系统的设计和实现

摘要随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/11/16 21:57:30

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构代码结构代码详情功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/11/17 1:26:46

非受控组件实现

受控组件实现

相关文章：