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

React的表单数据绑定

news 2026/2/7 11:53:24

当我们在页面中使用表单提交数据时,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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2026/2/1 21:34:47

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2026/1/24 20:17:55

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2026/1/10 10:16:16

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/10/7 4:57:55

OPenCV CUDA模块图像处理-----对图像执行均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在 GPU 上对图像执行均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

Device Mapper 机制

Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...

编程新知 2025/12/14 13:11:33

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程触发条件：当其他组件（如Activity、Service）通过ContentR…...

编程新知 2025/10/2 19:46:59

LangFlow技术架构分析

🔧 LangFlow 的可视化技术栈前端节点编辑器底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机实时连线定义节点依赖关系可视化调试循环和分支逻辑与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

非受控组件实现

受控组件实现

相关文章：