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

React的表单数据绑定

news 2026/4/15 11:12:16

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

Spring Cloud Zuul实战：5分钟搞定微服务网关配置（含Eureka集成）

Spring Cloud Zuul极速实践：从零构建高可用微服务网关微服务架构的流行让系统拆分变得更加灵活，但同时也带来了新的挑战——如何优雅地管理众多服务的入口？想象一下，当你的系统由数十个微服务组成时，客户端需要记住每…...

编程新知 2026/4/15 10:41:20

千问3.5-2B助力嵌入式开发：智能调试与日志分析

千问3.5-2B助力嵌入式开发：智能调试与日志分析 1. 嵌入式开发的调试痛点在STM32等嵌入式系统开发中，调试过程往往充满挑战。想象一下这样的场景：设备突然异常重启，控制台输出长达数百行的日志信息，其中混杂着硬件中…...

编程新知 2026/4/15 9:46:24

科技中介服务机构如何借助数据提升服务专业性？

观点作者：科易网-国家科技成果转化（厦门）示范基地一、现状概述：成效与短板在数智化转型加速的背景下，科技中介服务机构作为连接创新供给与产业需求的桥梁，其服务专业性直接决定了科技成果转化的效率与质量…...

编程新知 2026/4/15 9:19:32

mysql如何通过预编译语句优化性能_使用Prepared Statements减少解析

预编译语句能减少SQL解析开销，因其将SQL结构固定并缓存执行计划，后续仅替换参数、跳过词法语法分析等步骤；适用于同一模板调用≥3次且参数稳定场景。为什么预编译语句能减少 SQL 解析开销MySQL 每次执行普通 INSERT、SELECT 时，都…...

编程新知 2026/4/15 9:09:13

中小企业本地部署即时通讯：预算有限怎么把功能配齐

对于员工规模在50人到300人之间的中小企业来说，本地部署即时通讯时，核心不是一味追求功能越多越好，而是要先解决三个现实问题：数据能不能放在自己服务器上，日常沟通和文件传输够不够稳定，以及整体部署成本能…...

编程新知 2026/4/15 8:36:01

3分钟搞定城通网盘限速：免费直连解析工具完整指南

3分钟搞定城通网盘限速：免费直连解析工具完整指南【免费下载链接】ctfileGet 获取城通网盘一次性直连地址项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否曾经因为城通网盘的限速下载而烦恼？面对几十KB/s的下载速度，…...

编程新知 2026/4/15 8:36:01

ComfyUI极速上手指南：零基础搭建高效AI绘图工作流

1. ComfyUI初印象：为什么选择这个AI绘图神器第一次接触ComfyUI时，我完全被它独特的节点式操作方式吸引了。与常见的WebUI不同，ComfyUI把整个AI绘图过程拆解成一个个可视化模块，就像搭积木一样自由组合。这种设计理念让创作过程变…...

编程新知 2026/4/15 8:29:50

C++ STL常用容器1——string容器

写在前面：⭐如果本篇博文对你有帮助，那就关注点赞收藏一下吧！ 目录 1.string基本概念 2.string构造函数 3.string容器 4.string字符串拼接 5.string查找和替换 6.string字符串比较 7.string字符存取 8.string插入和删除 9.strin…...

编程新知 2026/4/15 8:15:35

Qwen3智能字幕系统入门必看：从零部署清音刻墨镜像详细步骤

Qwen3智能字幕系统入门必看：从零部署清音刻墨镜像详细步骤你是不是也遇到过这样的烦恼？自己录制的视频，或者下载的课程，想配上精准的字幕，结果发现自动生成的字幕时间轴对不上，要么字幕提前了&#xff0c…...

编程新知 2026/4/15 7:25:15

Qwen3.5-9B提示词工程入门：编写高效指令激发模型潜能

Qwen3.5-9B提示词工程入门：编写高效指令激发模型潜能 1. 为什么需要学习提示词工程如果你用过AI大模型，可能遇到过这样的情况：明明是个很强大的模型，但给你的回答却总是不尽如人意。问题很可能出在你给它的"指令"上—…...

编程新知 2026/4/15 7:25:15

非受控组件实现

受控组件实现

相关文章：