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

React的表单数据绑定

news 2025/9/27 20:23:20

当我们在页面中使用表单提交数据时,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——微服务框架（单体式-＞分布式-＞微服务）

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

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

【Spring Cloud】Feign传递HttpServletRequest

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

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

烟火识别智能监测系统 yolov5

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

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

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

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

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

JS中 Math 和 Number 内置对象常用的一些方法

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的记录和分享&#xff0c;作为一名开发人员&#xff0c;你需要了解这个东西并且学会它的简单使用&#xff0c;但是作为一名开发而不是运维&#xff0c;不要花过多的时间去深究它的原理&#xff0c;而是把它当作一个工具即可 docker Docke…...

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

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

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

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

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

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/130730986 出自【进步*于辰的博客】 其实我的【Java-API】专栏内的博文对大家来说意义是不大的。…...

编程日记 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：让浏览器变成你的智能助手

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

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

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

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

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

Android SystemUI篇(二)

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

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

第六讲：“声音”写具体

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

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

Unity 向量

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

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

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

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

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

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

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

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

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

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

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

面试被问麻了....

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

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

AspNetCore中的配置文件详解

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

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/9/27 20:22:43

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/25 19:44:45

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/9/19 9:20:37

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/8/13 7:14:07

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/9/22 13:27:06

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/9/23 15:59:15

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/9/22 23:36:45

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/9/23 1:36:38

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/8/20 11:30:50

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/9/26 13:44:15