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

【08】基础知识：React中收集表单数据（非受控组件和受控组件）

news 文章来源：https://blog.csdn.net/weixin_45559449/article/details/133825302 2025/1/17 7:48:16

一、概念

非受控组件：

页面中所有输入类的 DOM，现用现取。

给组件绑定 ref 属性，在需要时通过 ref 获取相应值。

受控组件：

页面中所有输入类的 DOM，随着输入，将内容维护到状态 state中，当需要使用时，直接从 state 中读取，这类 DOM属于受控组件。

通过组件的 onChange 事件，获取组件的 value 值，存储到 state 中。

相当于 VUE 中的双向数据绑定 v-model，React 中没有封装双向数据绑定，需要自己实现。

二、案例

需求：定义一个包含表单的组件，输入用户名密码后，点击登录提示输入信息

非受控实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Login extends React.Component {render() {return (<form onSubmit={this.handleSubmit}>用户名：<input ref={c => this.username = c} type="text" name="username"/><input ref={c => this.password = c} type="password" name="password"/>密码：<button>登录</button></form>)}handleSubmit = event => {event.preventDefault() // 阻止表单提交，form中的button默认也是onSubmit方法const { username, password } = thisalert(`你输入的用户名是${username.value}，密码是${password.value}`)}}ReactDOM.render(<Login/>, document.getElementById('test'))</script>
</body>
</html>

受控实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Login extends React.Component {// 初始化状态state = {username: '', // 用户名password: '' // 密码}// 提交handleSubmit = event => {event.preventDefault() // 阻止表单提交，form中的button默认也是onSubmit方法const { username, password } = this.statealert(`你输入的用户名是${username}，密码是${password}`)}// 保存用户名到状态中saveUsername = event => {this.setState({ username: event.target.value})}// 保存密码到状态中savePassword = event=>{this.setState({ password: event.target.value })}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveUsername} type="text" name="username"/><input onChange={this.savePassword} type="password" name="password"/>密码：<button>登录</button></form>)}}// 渲染组件ReactDOM.render(<Login/>, document.getElementById('test'))</script>
</body>
</html>

三、高阶写法

高阶函数 + 函数柯里化

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

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

2、若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。

常见的高阶函数有：Promise、setTimeout、arr.map() 等等

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

function sum(a) {return(b) => {return (c) => {return a+b+c}}
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高阶函数_函数柯里化</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// 创建组件class Login extends React.Component {// 初始化状态state = {username: '', //用户名password: '' //密码}// 保存表单数据到状态中saveFormData = dataType => {return event => {this.setState({ [dataType]: event.target.value })}}// 表单提交的回调handleSubmit = event => {event.preventDefault() // 阻止表单提交，form中的button默认也是onSubmit方法const { username, password } = this.statealert(`你输入的用户名是${username}，密码是${password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />密码：<input onChange={this.saveFormData('password')} type="password" name="password" /><button>登录</button></form>)}}// 渲染组件ReactDOM.render(<Login />, document.getElementById('test'))</script>
</body></html>

使用箭头函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_不用函数柯里化的实现</title>
</head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">// 创建组件class Login extends React.Component {// 初始化状态state = {username: '', //用户名password: '' //密码}// 保存表单数据到状态中saveFormData = (dataType, event) => {this.setState({ [dataType]: event.target.value })}// 表单提交的回调handleSubmit = (event) => {event.preventDefault() //阻止表单提交const { username, password } = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={event => this.saveFormData('username', event)} type="text" name="username" />密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password" /><button>登录</button></form>)}}// 渲染组件ReactDOM.render(<Login />, document.getElementById('test'))</script>
</body>
</html>

相关文章：

【08】基础知识：React中收集表单数据（非受控组件和受控组件）

一、概念 非受控组件&#xff1a; 页面中所有输入类的 DOM&#xff0c;现用现取。 给组件绑定 ref 属性&#xff0c;在需要时通过 ref 获取相应值。 受控组件&#xff1a; 页面中所有输入类的 DOM&#xff0c;随着输入&#xff0c;将内容维护到状态 state中&#xff0c;当…...

编程日记 2023/10/16 13:45:38

数据结构之堆排序和前，中，后，层序遍历，链式二叉树

首先我们要知道升序我们要建小堆&#xff0c;降序建大堆&#xff0c;这与我们的大多人直觉相违背。 因为我们大多数人认为应该将堆顶的数据输出&#xff0c;但如果这样就会导致堆顶出堆以后&#xff0c;堆结构会被破坏&#xff0c;显然我们不能这样。 所有我们反其道而行&…...

编程日记 2023/10/16 13:44:37

多线程中ThreadPoolExecutor.map()中传递多个参数

with concurrent.futures.ThreadPoolExecutor(max_threads) as executor:results executor.map(get_captcha_image, ip_addrs, [img_url] * len(ip_addrs)) #要传入多个参数时&#xff0c;每个参数都得是固定相同长度的可迭代对象# 收集结果for result in results:print(resul…...

编程日记 2023/10/16 13:43:35

linux centos7 环境下 no such file or directory

目录 1.问题描述2.主要原因2.1修改后代码2.2修改前代码 总结参考 1.问题描述 预览excel文件时无法找到对应的html文件 2.主要原因 异常原因&#xff1a;代码获取的是系统的tmp文件&#xff0c;但是linux环境环境中心tmp目录是没有权限的&#xff0c;所以不能获取系统的根目录…...

编程日记 2023/10/16 13:42:34

Nginx 反向代理 SSL 证书绑定域名

配置 Nginx 反向代理和 SSL 泛域名证书绑定域名 Nginx 是一个功能强大的 Web 服务器和反向代理服务器&#xff0c;可以用于将客户端请求转发到后端服务器&#xff0c;并提供安全的 HTTPS 连接。本文将介绍如何配置 Nginx 反向代理&#xff0c;并使用 SSL 泛域名证书绑定域名&a…...

编程日记 2023/10/16 13:41:33

SpringBoot 集成 JMS 与 IBMMQ 代码示例教程

文章目录 前言一、集成 JMS 与 IBMMQ1、pom 依赖2、yml 配置3、Properties 配置类4、Factory 连接工厂类5、配置连接认证6、配置缓存连接工厂7、配置事务管理器8、配置JMS模板9、消息发送与接收 总结 前言 SpringBoot 集成 IBMMQ&#xff0c;实现两个服务间的消息通信。 一、集…...

编程日记 2023/10/16 13:39:31

大模型之Prompt研究和技巧

大模型之Prompt研究和技巧 大模型之Prompt编写简介组成技术Zero-ShotFew-shotCOTCOT-SCTOTGoTReAct 大模型之Prompt编写 简介 Prompt是是给 AI **模型的指令&#xff0c;**一个简短的文本输入&#xff0c;用于引导AI模型生成特定的回答或执行特定任务。 Prompt是你与语言模型沟…...

编程日记 2023/10/16 13:38:30

掌握Golang匿名函数

一个全面的指南&#xff0c;以理解和使用Golang中的匿名函数 Golang以其简单和高效而闻名&#xff0c;赋予开发人员各种编程范式。其中一项增强代码模块化和灵活性的功能就是匿名函数。在这篇正式的博客文章中&#xff0c;我们将踏上探索Golang匿名函数深度的旅程。通过真实世…...

编程日记 2023/10/16 13:37:27

HarmonyOS云开发基础认证---练习题二

【判断题】 2/2 Serverless是云计算下一代的默认计算范式。 正确(True) 【判断题】 2/2 接入认证服务后&#xff0c;用户每次收到验证码短信都需要开发者买单。 错误(False) 【判断题】 2/2 认证服务手机号码登录需要填写国家码。 正确(True) 【判断题】 2/2 在Cloud Functi…...

编程日记 2023/10/16 13:36:26

ffmpeg视频解码器的配置选项含义

lowres的含义 lowres是AVCodecContext结构体中的一个成员变量&#xff0c;用于指定编解码器的降低分辨率级别。 在某些情况下&#xff0c;为了加快编解码的速度或减少计算资源的消耗&#xff0c;可以通过设置lowres参数来降低编解码器的分辨率级别。这将导致编解码器在处理视…...

编程日记 2023/10/16 13:34:24

enter ubuntu boot option in virt-manager

在全屏模型下&#xff0c;启动过程中按下F8或者Ctrl F8。 参考&#xff1a;https://serverfault.com/questions/463024/how-do-i-access-the-f8-bootmenu-while-booting-a-windows-2008r2-kvm-guest-vm...

编程日记 2023/10/16 13:32:22

电商运营该如何做 AB 测试

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 近年&#xff0c;电商行业进入了一个新的发展阶段&#xff0c;一方面电商市场规模持续扩大&#xff0c;另一方面直播电商、即时零售、社区团购等新兴电商业态在疫情…...

编程日记 2023/10/16 13:31:21

go环境部署

#env 命令查看 PATH 发现 #这两条环境变量是把 通过brew 安装的所有程序加入到环境变量中,其中就包含了go /opt/homebrew/sbin /opt/homebrew/bin#mac 系统 将原本 brew 安装的 go 1.20.5版本卸载 brew uninstall go #然后 去官网下载 https://go.dev/dl/ 想要的版本 1.21.0 …...

编程日记 2023/10/16 13:30:20

HTTP/2 中的漏洞

另一个热门漏洞是 CVE-2023-44487。 该漏洞与 HTTP/2 协议实施中的一个缺陷有关&#xff0c;可用于实施 DDoS 攻击。使用该漏洞的攻击被命名为 HTTP/2 快速重置。 为什么它很危险 要利用该漏洞&#xff0c;攻击者需要在 HTTP/2 会话中打开大量请求&#xff0c;然后在不等待服…...

编程日记 2023/10/16 13:29:20

智能油烟机 优化烹饪体验

如果说空调是夏天最伟大的发明&#xff0c;那么油烟机则是健康厨房的伟大推进者。随着科技的发展&#xff0c;智能化的油烟机逐渐走进了人们的日常生活。每当我们在爆炒、油炸食物的时候&#xff0c;油烟总能呛得人眼睛痛、鼻子难受&#xff0c;传统的油烟机面前我们还需要手动…...

编程日记 2023/10/16 13:27:16

啥？PS一秒成图？Adobe的逆天黑科技大公开

在日前举行的 Adobe MAX 创意大会上&#xff0c;Adobe Adobe Firefly Image 2&#xff08;萤火虫二代成像模型&#xff09;、Firefly Vector Model&#xff08;萤火虫矢量模型&#xff09;和Firefly Design Model&#xff08;萤火虫设计模型&#xff09;。 Firefly矢量模型是世…...

编程日记 2023/10/16 13:26:15

扫描器（xray和bp联动）

文章目录 分类主动扫描和被动扫描bp与xray联动 分类 扫描器分为对web的扫描器和对主机的扫描器 主动扫描和被动扫描 主动扫描&#xff1a; 输入某个URL&#xff0c;然后由扫描器中的爬虫模块爬取所有链接&#xff0c;对GET、POST等请求进行参数变形和污染&#xff0c;进行重放测…...

编程日记 2023/10/16 13:25:14

[C++]:1.初识C++和C语言缺陷补充。

初识C和C语言缺陷补充 一.主要内容&#xff1a;二.具体内容&#xff1a;一&#xff1a; 作用域1.命名空间&#xff1a;2.函数声明和定义&#xff1a;3.不存在命名冲突的情况&#xff1a; 二.输入输出&#xff1a;1.基本输入输出&#xff1a;2.关于std的展开&#xff1a; 三.函数…...

编程日记 2023/10/16 13:23:09

BUUCTF学习(三): PHP 代码审计

1、介绍 2、解题 （1）查看网页源代码 （2）返回链接 （3）代码审计...

编程日记 2023/10/16 13:22:08

推荐《Blue prison》

电视动画片《蓝色监狱》改编自金城宗幸原作、野村优介作画的同名漫画作品&#xff0c;于2021年7月31日宣布电视动画化的消息 [1]。该片由8Bit负责动画制作&#xff0c;于2022年10月9日起播出 [2]&#xff0c;全24集。 该作评为Anime Corner 2022年年度体育动画 [24]&#xff0…...

编程日记 2023/10/16 13:20:06

goland安装教程

安装版本&#xff1a; goland-2023.2.3.exe...

编程日记 2023/10/16 13:18:02

java中okhttp和httpclient那个效率高

在比较OkHttp和HttpClient的效率时&#xff0c;需要考虑多个因素&#xff0c;包括性能、吞吐量、资源消耗等。这些因素往往取决于具体的使用场景和需求。 OkHttp是一个由Square开发的现代化HTTP客户端库&#xff0c;它在Android平台上广泛使用&#xff0c;并且也可以在Java应用…...

编程日记 2023/10/16 13:17:01

内存占用问题

虚拟内存介绍 虚拟内存就是将部分磁盘变成内存的拓展&#xff0c;用上去就好像是将内存变大了一样。 比如同样是16G的物理内存&#xff0c;有人能比你多开几个应用&#xff0c;你开两三个就要黑屏&#xff0c;然后浏览器说你内存不够。 打开任务管理器&#xff0c;内存也没有…...

编程日记 2023/10/16 13:15:58

代码随想录二刷 Day 34

455.分发饼干 这个题差不多是两个for循环遍历&#xff0c;然后用双指针法化简&#xff0c;自己可以大概写出来&#xff0c;漏了一个边界条件 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end(…...

编程日记 2023/10/16 13:14:58

软件开源快速开发框架：降本增效，助力流程化办公！

随着时代的进步和社会的发展&#xff0c;应用软件开源快速开发框架的优势特点&#xff0c;可以让不少客户朋友顺利实现流程化办公&#xff0c;朝着数字化方向迈进。流辰信息是专业研发低代码技术平台的服务商&#xff0c;一直在低代码平台领域深耕细作&#xff0c;努力钻研&…...

编程日记 2023/10/16 13:13:55

Flink on k8s容器日志生成原理及与Yarn部署时的日志生成模式对比

Flink on k8s部署日志详解及与Yarn部署时的日志生成模式对比 最近需要将flink由原先部署到Yarn集群切换到kubernetes集群&#xff0c;在切换之后需要熟悉flink on k8s的运行模式。在使用过程中针对日志模块发现&#xff0c;在k8s的容器中&#xff0c;flink的系统日志只有jobma…...

编程日记 2023/10/16 13:12:54

AD20绘制电路板的外形

今天学习了绘制电路板外形的方法&#xff0c;记录一下&#xff0c;回头忘了还能在看看&#xff0c;便能很快的回忆起来了&#xff0c;比看视频啥的要高效的多。毕竟是自己写的&#xff0c;印象要深刻的多。 首先新建一个PCBDoc文件&#xff0c;方法如下图&#xff1a; 在新建的…...

编程日记 2023/10/16 13:11:52

linux 设置开机启动

1、Fedora 20系列操作系统 touch /etc/rc.d/rc.local chmod x /etc/rc.d/rc.local vi /etc/rc.d/rc.local 按“i”进入编辑模式&#xff0c;在文件末尾补充如下内容&#xff1a; 可以根据需要添加你要开机自启动的脚本命令&#xff08;下面是举例&#xff09;&#xff1a; …...

编程日记 2023/10/16 13:09:49

IDEA实现远程Debug调试

一、 前提   需要准备JDK1.8环境&#xff0c;安装IDEA(版本不限) 二、 IDEA中如何实现远程Debug模式 (1)、创建demo项目 1.File一>New一>project… 2.Maven Archetype一>填写Name一>选择jdk1.8一>选择Web一>创建 (2)、配置Idea 找到Remote Jvm Debug java…...

编程日记 2023/10/16 13:07:48

SpringBoot项目入门： IDEA 创建SpringBoot项目

方式1:在线创建项目 https://start.spring.io/ 环境准备 &#xff08;1&#xff09;JDK 环境必须是 1.8 及以上&#xff0c;传送门&#xff1a;jdk1.8.191 下载&#xff08;2&#xff09;后面要使用到 Maven 管理工具 3.2.5 及以上版本&#xff08;3&#xff09;开发工具建议…...

编程日记 2023/10/16 13:06:46

wordpress avatars/seo综合检测

计算机专业考公务员好吗 - ...... 好考~ 按往年招收职位专业划分,前三位就是计算机,会计和中文,这三个专业哪个部门都需要.三本学生毕业想考公务员难不难 - ...... 可以考的,如果符合其他职位要求也是可以报考的,无论你是几本的学生,对于考公务员关系不大,因为现在的公务员招考…...

编程日记 2025/1/17 6:13:42

罗定城乡建设局网站/石家庄网站建设

2021中山市普通高中排名一览表2021-05-06 13:40:35文/董玉莹高中对于学生的学习是影响很大的&#xff0c;好的高中能提供学生好的学习环境。本文整理了中山高中排名&#xff0c;来看看都有哪些重点高中。高中排名排名学校名称1中山市中山纪念中学2中山市第一中学3中山市华侨中学…...

编程日记 2025/1/17 0:41:18

wordpress 买主题/安卓优化神器

皮一下Git操作流程第一部分 命令行1、分支操作1. git branch 创建分支2. git checkout -b 创建并切换到新建的分支上3. git checkout 切换分支4. git branch 查看分支列表5. git branch -v 查看所有分支的最后一次操作6. git branch -vv 查看当前分支7. git brabch -b 分支名 o…...

编程日记 2025/1/17 0:05:14

网站 数据库选择/google seo 优化教程

1&#xff0c;基本了解&#xff1a; tftp是基于UDP来下载远程文件的网络协议。 作用&#xff1a;比较好适用于初始化时下载少量的文件数据。比如内核和设备树。 当有大量文件且会有定时的新文件加入调试的话&#xff0c;使用nfs的创建的共享目录较好。所以一般将制作好的根文件…...

编程日记 2025/1/16 19:45:30

dede的网站地图/百度上海分公司

升级SVN&#xff0c;解决Cornerstone不能Commit问题开场白今天SVN突然就不好使了&#xff08;我司用的是Cornerstone&#xff09;具体情况就是可以Check Out、Update、Revert&#xff0c;就是不能Commit&#xff08;就是这么吊诡&#xff09;。问了下组长该怎么办&#xff0c;他…...

编程日记 2025/1/16 8:35:52

简单的企业网站的主页/什么软件可以免费引流

【前言】 本文译自《Classic Shell Scripting》 UNIX的安全性一向是恶名在外&#xff0c;几乎从每个角度看&#xff0c;UNIX系统都有或多或少的安全性争议&#xff0c;不过这些大部分都是系统管理者应该担心的。下面列出了一长串“诀窍”&#xff0c;提醒你编写Shell脚本应…...

编程日记 2025/1/16 7:04:33