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

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

news 2026/3/28 6:51:41

一、概念

非受控组件：

页面中所有输入类的 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中收集表单数据（非受控组件和受控组件）

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

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

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

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

编程日记 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)) #要传入多个参数时，每个参数都得是固定相同长度的可迭代对象# 收集结果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.主要原因异常原因：代码获取的是系统的tmp文件，但是linux环境环境中心tmp目录是没有权限的，所以不能获取系统的根目录…...

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

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

配置 Nginx 反向代理和 SSL 泛域名证书绑定域名 Nginx 是一个功能强大的 Web 服务器和反向代理服务器，可以用于将客户端请求转发到后端服务器，并提供安全的 HTTPS 连接。本文将介绍如何配置 Nginx 反向代理，并使用 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，实现两个服务间的消息通信。一、集…...

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

大模型之Prompt研究和技巧

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

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

掌握Golang匿名函数

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

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

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

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

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

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

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

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

enter ubuntu boot option in virt-manager

在全屏模型下，启动过程中按下F8或者Ctrl F8。参考：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 测试

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

编程日记 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 协议实施中的一个缺陷有关，可用于实施 DDoS 攻击。使用该漏洞的攻击被命名为 HTTP/2 快速重置。为什么它很危险要利用该漏洞，攻击者需要在 HTTP/2 会话中打开大量请求，然后在不等待服…...

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

智能油烟机优化烹饪体验

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

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

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

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

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

扫描器（xray和bp联动）

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

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

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

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

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

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

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

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

Keil工程管理效率翻倍：Python脚本实现构建结果自动归档与HTML报告生成

Keil工程管理效率翻倍：Python脚本实现构建结果自动归档与HTML报告生成在嵌入式开发领域，Keil作为主流开发工具链的核心组件，其工程管理效率直接影响着团队协作和产品迭代速度。传统开发流程中，工程师往往需要手动收集每次构建生成…...

编程新知 2026/3/28 6:48:50

告别吃灰！用Kindle打造唐诗宋词字帖屏保的完整避坑指南（含繁简转换技巧）

用Kindle打造唐诗宋词字帖屏保的完整指南作为一个长期关注数字阅读与传统文化的深度用户，我发现Kindle的墨水屏特性非常适合展示书法字帖。这种将现代科技与传统艺术结合的方式，不仅能提升设备使用率，还能在日常碎片时间中培养书写习惯。本文…...

编程新知 2026/3/28 6:42:49

Html2Pdf高性能转换引擎：PHP 7.2-8.4全版本兼容的企业级HTML转PDF解决方案

Html2Pdf高性能转换引擎：PHP 7.2-8.4全版本兼容的企业级HTML转PDF解决方案【免费下载链接】html2pdf OFFICIAL PROJECT | HTML to PDF converter written in PHP 项目地址: https://gitcode.com/gh_mirrors/ht/html2pdf 在当今企业数字化转型浪潮中&#xf…...

编程新知 2026/3/28 3:57:48