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

React的表单数据绑定

news 2025/6/10 13:54:56

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

C++11 constexpr和字面类型：从入门到精通

文章目录引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

编程新知 2025/6/10 12:12:23

JUC并发编程（二）Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除

目录一基础 1 概念 2 卖票问题 3 转账问题二锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理一基础 1 概念临界区一段代码块内如果存在对共享资源的多线程读写操作&#xf…...

编程新知 2025/6/10 9:59:17

电脑定时关机工具推荐

软件介绍本文介绍一款轻量级的电脑自动关机工具，无需安装，使用简单，可满足定时关机需求。工具简介这款关机助手是一款无需安装的小型软件，文件体积仅60KB，下载后可直接运行，无需复杂配置。使用…...

编程新知 2025/6/10 5:50:34

RabbitMQ work模型

Work 模型是 RabbitMQ 最基础的消息处理模式，核心思想是多个消费者竞争消费同一个队列中的消息，适用于任务分发和负载均衡场景。同一个消息只会被一个消费者处理。当一个消息队列绑定了多个消费者，每个消息消费的个数都是平摊的&a…...

编程新知 2025/6/10 3:51:16

python打卡第48天

知识点回顾： 随机张量的生成：torch.randn函数卷积和池化的计算公式（可以不掌握，会自动计算的）pytorch的广播机制：加法和乘法的广播机制 ps：numpy运算也有类似的广播机制，基本一致 **…...

编程新知 2025/6/10 1:34:59

论文阅读笔记——Large Language Models Are Zero-Shot Fuzzers

TitanFuzz 论文深度学习库（TensorFlow 和 Pytorch）中的 bug 对下游任务系统是重要的，保障安全性和有效性。在深度学习（DL）库的模糊测试领域，直接生成满足输入语言(例如 Python )语法/语义和张量计算的DL A…...

编程新知 2025/6/9 23:56:57

如何使用 Redis 快速实现布隆过滤器？

以下是使用 Redis 实现布隆过滤器的两种方案，结合原理说明和操作步骤： 方案一：手动实现（基于 Redis Bitmap） 原理利用 Redis 的 SETBIT 和 GETBIT 操作位数组，结合多个哈希函数计算位置。步骤确定参数…...

编程新知 2025/6/9 21:20:50

vue-14（使用 ‘router.push‘ 和 ‘router.replace‘ 进行编程导航）

使用 ‘router.push’ 和 ‘router.replace’ 进行编程导航编程导航是使用 Vue Router 构建动态和交互式 Web 应用程序的一个重要方面。它允许您根据应用程序逻辑、用户作或特定条件控制用户的导航流。您可以使用 router.push 和 router.replace 方法以编程方式导航到不同的路…...

编程新知 2025/6/9 21:00:40

Cursor 工具项目构建指南： Uniapp Miniprogram 环境下的 Prompt Rules 约束

简简单单 Online zuozuo：简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo ：本心、输入输出、结果简简单单 Online zuozuo ：文章目录 Cursor 工具项目构建指南： Uniapp Miniprogram 环境下的 Prompt Rules 约束前言项目简…...

编程新知 2025/6/9 18:13:17

基于 actix-web 框架的简单 demo

以下是一个基于 actix-web 框架的简单 demo， 如果你还没有 Rust，我们建议你使用 rustup 来管理你的 Rust 安装。官方 Rust 指南有一个很棒的入门部分。 Actix Web 目前支持的最低 Rust 版本 （MSRV） 为 1.72。运行 rustup update…...

编程新知 2025/6/9 15:23:55

非受控组件实现

受控组件实现

相关文章：