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

React 受控表单绑定基础

news 来源：原创 2025/8/15 7:23:10

React 中最常见的几个需求是：

  • 渲染一组列表
  • 绑定点击事件
  • 表单数据与组件状态之间的绑定

受控表单绑定是理解表单交互的关键之一。

📍什么是受控组件？

在 React 中，所谓“受控组件”，指的是表单元素（如 <input>）的值被 React 的 state 控制着。

状态（state）和视图（input）形成一个双向绑定：

state 绑定到 input 的 value 属性
input 变化后，通过 onChange 修改 state

也就是说，用户输入的值不是直接改变 input，而是改变了 state，input 的 value 再随着 state 一起更新。

🛠 使用步骤

1. 准备一个 React 状态值

const [value, setValue] = useState('')

这一步很常规：先准备一个 state，初始值设为空字符串。

2. 把 state 绑定到 input 的 value，再用 onChange 更新它

<inputtype="text"value={value}                      // 显示内容 = React 中的 valueonChange={(e) => setValue(e.target.value)}  // 每次输入触发更新
/>

这个写法其实就是双向绑定的本质。

📖 小结（写给自己看的）

  1. 表单受控绑定核心就是 value + onChange，不能少。
  2. value={state} 是让 input 的值跟随 React 状态。
  3. onChange={(e) => setState(e.target.value)} 是把用户输入的值塞回 state。
  4. 如果不加 value，input 的值就不受 React 控制，是“非受控组件”。

虽然这段代码很短，但本质上已经是 React 数据驱动视图的典范了。
表单、搜索框、评论区……几乎所有输入型组件都离不开这一套。

下一步，我可能会整理一下：

  • 多个 input 怎么管理？（用一个 state 对象）
  • 复杂表单用 useReducer 管理
  • 用 ref 实现非受控表单场景

但无论是哪种方式，这一段写法是核心基础。
理解清楚之后，再复杂的场景也只不过是组合和抽象。

相关文章：

React 受控表单绑定基础

React 中最常见的几个需求是&#xff1a; 渲染一组列表绑定点击事件表单数据与组件状态之间的绑定 受控表单绑定是理解表单交互的关键之一。 &#x1f4cd;什么是受控组件&#xff1f; 在 React 中&#xff0c;所谓“受控组件”&#xff0c;指的是表单元素&#xff08;如 &l…...

编程日记 2025/8/15 7:23:10

UMG：ListView

1.创建WEB_ListView,添加Border和ListView。 2.创建Object,命名为Item(数据载体&#xff0c;可以是其他类型)。新增变量name。 3.创建User Widget&#xff0c;命名为Entry(循环使用的UI载体).添加Border和Text。 4.设置Entry继承UserObjectListEntry接口。 5.Entry中对象生成时…...

编程日记 2025/8/8 1:21:42

实验五 内存管理实验

实验五 内存管理实验 一、实验目的 1、了解操作系统动态分区存储管理过程和方法。 2、掌握动态分区存储管理的主要数据结构--空闲表区。 3、加深理解动态分区存储管理中内存的分配和回收。 4、掌握空闲区表中空闲区3种不同放置策略的基本思想和实现过程。 5、通过模拟程…...

编程日记 2025/8/11 6:45:49

初识 Firebase 与 FPM

Firebase 是什么 ? Firebase 是 Google 旗下面向 iOS、Android、Web 与多端框架&#xff08;Flutter、Unity 等&#xff09;的应用开发平台&#xff0c;提供从「构建 → 发布与运维 → 增长」全生命周期的一站式后端即服务&#xff08;BaaS&#xff09;。它把实时数据库、托管…...

编程日记 2025/8/14 13:17:28

探索C++中的数据结构：栈(Stack)的奥秘

引言 栈是计算机科学中最基础且重要的数据结构之一&#xff0c;它像一摞盘子一样遵循"后进先出"&#xff08;LIFO&#xff09;的原则。无论是函数调用、表达式求值&#xff0c;还是浏览器前进后退功能&#xff0c;栈都扮演着关键角色。本文将深入解析栈的C实现及其应…...

编程日记 2025/8/13 4:23:52

vue3 nprogress 使用

nprogress 介绍与作用 1.nprogress 是一个轻量级的进度条组件&#xff0c;主要用于在页面加载或路由切换时显示一个进度条&#xff0c;提升用户体验。它的原理是通过在页面顶部创建一个 div&#xff0c;并使用 fixed 定位来实现进度条的效果 2.在 Vite Vue 3 项目中&#xf…...

编程日记 2025/8/10 11:41:16

MCP（Model Context Protocol 模型上下文协议）科普

MCP&#xff08;Model Context Protocol&#xff0c;模型上下文协议&#xff09;是由人工智能公司 Anthropic 于 2024年11月 推出的开放标准协议&#xff0c;旨在为大型语言模型&#xff08;LLM&#xff09;与外部数据源、工具及服务提供标准化连接&#xff0c;从而提升AI在实际…...

编程日记 2025/8/14 19:58:27

韩媒专访CertiK创始人顾荣辉：黑客攻击激增300%，安全优先的破局之路

4月17日&#xff0c;韩国知名科技媒体《韩国IT时报》(Korea IT Times)发布了对CertiK联合创始人兼CEO顾荣辉教授的专访。双方围绕CertiK一季度《HACK3D》安全报告&#xff0c;就黑客攻击手法的迭代和安全防御技术的创新路径等&#xff0c;展开深度对话。 顾荣辉认为&#xff0…...

编程日记 2025/8/9 16:56:11

华为openEuler操作系统全解析：起源、特性与生态对比

华为openEuler操作系统全解析&#xff1a;起源、特性与生态对比 一、起源与发展历程 openEuler&#xff08;欧拉操作系统&#xff09;是华为于2019年开源的Linux发行版&#xff0c;其前身为华为内部研发的服务器操作系统EulerOS。EulerOS自2010年起逐步发展&#xff0c;支持华…...

编程日记 2025/8/14 21:38:14

从零实现Git安装、使用

一、git安装 Git官方下载 1.下载exe程序 2.双击安装&#xff0c;一直点击next&#xff0c;默认安装 安装完成后&#xff0c;在任意文件夹右键&#xff0c;出现下图所示&#xff0c;即为安装成功。 3.【Git Bash Here】调出命令窗口&#xff0c;设置用户名和 email 地址。 gi…...

编程日记 2025/8/13 19:32:09

leetcode刷题日记——单词规律

[ 题目描述 ]&#xff1a; [ 思路 ]&#xff1a; 题目要求判断字符串 s 中的单词是否按照 pattern 这种模式排列具体思路和 205. 同构字符串基本一致&#xff0c;可以通过 hash 存储来实现思路二&#xff0c;通过字符串反推 pattern&#xff0c;如果一致&#xff0c;则遵循相…...

编程日记 2025/8/12 4:56:22

Ubuntu 修改语言报错Failed to download repository information

1.进入文件(ps:vim可能出现无法修改sources.list文件的问题&#xff09; sudo gedit /etc/apt/sources.list2.修改(我是直接增添以下内容在其原始源前面&#xff0c;没有删原始内容)文件并保存&#xff0c;这里会替换原文件 deb http://mirrors.aliyun.com/ubuntu/ focal mai…...

编程日记 2025/8/10 18:40:14

烹饪与餐饮管理实训室数字课程开发方案

烹饪与餐饮管理专业需要具有餐饮产品设计、研发的能力&#xff1b; 具有饮食美学、科学配餐与高端宴席设计的能力&#xff1b; 具有餐饮企业、中央厨房运营管理的能力&#xff1b; 具有餐饮信息化系统应用、数字化运营的能力&#xff0c;这些能力的培养&#xff0c;需要烹饪与餐…...

编程日记 2025/8/15 4:49:00

关于模拟噪声分析的11个误区

目录 1. 降低电路中的电阻值总是能改善噪声性能 2. 所有噪声源的噪声频谱密度可以相加&#xff0c;带宽可以在最后计算时加以考虑 3. 手工计算时必须包括每一个噪声源 4. 应挑选噪声为ADC 1/10的ADC驱动器 5. 直流耦合电路中必须始终考虑1/f噪声 6. 因为1/f噪声随着频率降…...

编程日记 2025/8/9 1:30:14

基于 S2SH 架构的企业车辆管理系统：设计、实现与应用

在企业运营中&#xff0c;车辆管理是一项重要工作。随着企业规模的扩大&#xff0c;车辆数量增多&#xff0c;传统管理方式效率低下&#xff0c;难以满足企业需求。本文介绍的基于 S2SH 的企业车辆管理系统&#xff0c;借助现代化计算机技术&#xff0c;实现车辆、驾驶员和出车…...

编程日记 2025/8/13 15:59:43

51单片机实验七：EEPROM AT24C02 与单片机的通信实例

目录 一、实验环境与实验器材 二、实验内容及实验步骤 三、proteus复位电路 1.改电阻的阻值&#xff08;方法一&#xff09; 2.改电阻的属性&#xff08;方法2&#xff09; 一、实验环境与实验器材 环境&#xff1a;Keli&#xff0c;STC-ISP烧写软件,Proteus. …...

编程日记 2025/8/2 17:19:20

【TeamFlow】 1 TeamFlow 去中心化生产协同系统架构

总体架构设计 采用四层混合架构&#xff0c;结合分层设计与去中心化网络&#xff1a; #mermaid-svg-qBgw9wMd8Gi0gOci {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-qBgw9wMd8Gi0gOci .error-icon{fill:#552222;}…...

编程日记 2025/8/10 14:37:34

第 8 期：条件生成 DDPM：让模型“听话”地画图！

本期关键词&#xff1a;Conditional DDPM、Class Embedding、Label Control、CIFAR-10 条件生成 什么是条件生成&#xff08;Conditional Generation&#xff09;&#xff1f; 在标准的 DDPM 中&#xff0c;我们只是“随机生成”图像。 如果我想让模型生成「小狗」怎么办&…...

编程日记 2025/8/14 17:08:59

树莓派超全系列教程文档--(32)config.txt常用音频配置

config.txt常用音频配置 板载模拟音频&#xff08;3.5mm耳机插孔&#xff09;audio_pwm_modedisable_audio_ditherenable_audio_ditherpwm_sample_bits HDMI音频 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 板载模拟音频&#xff08;3.5mm耳机…...

编程日记 2025/8/8 8:11:18

Perf学习

重要的能解决的问题是这些&#xff1a; perf_events is an event-oriented observability tool, which can help you solve advanced performance and troubleshooting functions. Questions that can be answered include: Why is the kernel on-CPU so much? What code-pa…...

编程日记 2025/8/12 8:41:08

量子神经网络编译器开发指南：从理论突破到产业落地全景解析

本文深度剖析IBM Qiskit 5.0量子经典混合编译器的技术架构&#xff0c;详解如何基于含噪量子处理器实现MNIST手写数字分类任务&#xff08;准确率达89%&#xff09;。结合本源量子云、百度量子等国内平台免费配额政策&#xff0c;系统性阐述量子神经网络开发的技术路线与资源获…...

编程日记 2025/8/4 1:56:12

守护者进程小练习

守护者进程含义 定义&#xff1a;守护进程&#xff08;Daemon&#xff09;是运行在后台的特殊进程&#xff0c;独立于控制终端&#xff0c;周期性执行任务或等待事件触发。它通常以 root 权限运行&#xff0c;名称常以 d 结尾&#xff08;如 sshd, crond&#xff09;。 特性&a…...

编程日记 2025/8/9 13:55:31

研究生面试常见问题

研究生面试是考研复试的重要环节&#xff0c;面试表现直接关系到录取结果。以下从面试流程、常见问题分类及回答技巧等方面为您整理了相关内容&#xff0c;帮助您更好地准备面试。 一、研究生面试的基本流程 自我介绍&#xff1a;通常需要准备1分钟左右的中文或英文自我介绍&a…...

编程日记 2025/8/6 5:25:57

极狐GitLab 登录限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 登录限制 (BASIC SELF) 您可以使用登录限制自定义 Web 界面以及基于 HTTP(S) 的 Git 的身份验证限制。 设置 要访问登录限…...

编程日记 2025/8/13 20:17:01

AI驱动商业变革：零售行业的智能化跃迁

引言&#xff1a;AI技术迈入黄金时代 2024年成为生成式AI&#xff08;Gen AI&#xff09;全面落地的关键年。据麦肯锡《技术趋势展望》报告&#xff0c;生成式AI相关投资同比增长​7倍​​&#xff0c;其经济价值预计达​​2.6-4.4万亿美元​​[1]。在零售领域&#xff0c;该技…...

编程日记 2025/8/14 14:23:26

初始图像学(6)

Camera类 我们之前学了很多的图形学知识和相关的程序&#xff0c;现在我们停下脚步&#xff0c;来好好整理一下我们学习的内容&#xff0c;我们将之前的视口代码和渲染代码合并到一个新的单类camera.h&#xff0c;这个类主要负责两项任务&#xff1a; 构建并发射光线到世界中 …...

编程日记 2025/8/14 18:11:21

【React】通过 fetch 发起请求，设置 proxy 处理跨域

fetch 基本使用跨域处理 fetch 基本使用 在node使用原生ajax发请求&#xff1a;XMLHttpRequest()1.获取xhr对象 2.注册回调函数 3.设置参数&#xff0c;请求头 4.发起连接原生ajax没有带异步处理 promise&#xff1b;原生ajax封装一下&#xff0c;以便重复调用jQuery&#…...

编程日记 2025/8/10 6:41:07

好数对的数目

题目描述 给你一个整数数组 nums。 如果一组数字 (i, j) 满足 nums[i] nums[j] 且 i < j&#xff0c;就可以认为这是一组 好数对。 返回 好数对 的数目。 示例 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1,1,3] 输出&#xff1a;4 解释&#xff1a; 有 4 组好…...

编程日记 2025/8/8 1:33:32

Animated Raindrop Ripples In HLSL

这节课是利用材质做雨滴i效果 首先是创建一个圆环&#xff0c;实际上他就是为了创建一个圆&#xff0c;但是是空心的&#xff0c;可以看之前我的做法&#xff0c;这里以他的为准 创建圆环 就是当uv的点在max_radius和min_radius之间的时候绘制。 他这里写了ringThickness&a…...

编程日记 2025/8/8 13:58:22

Linux学习——守护进程编程

一、守护进程含义及实现过程 1、含义 守护进程&#xff08;Daemon Process&#xff09; 是操作系统中一种在后台长期运行的特殊进程&#xff0c;通常不与用户直接交互。它独立于控制终端&#xff0c;用于执行周期性任务或系统服务&#xff08;如日志管理、网络服务等&#xff…...

编程日记 2025/8/15 4:45:22

【C++】 —— 笔试刷题day_19

一、小易的升级之路 题目解析 小易现在要打游戏&#xff0c;现在游戏角色的初始能力值为a&#xff0c;我们会遇到n个怪&#xff0c;这些怪物的防御值为b1、b2、b3...&#xff0c;如果我们的能力值要高于或者等于怪物的防御值&#xff0c;那我们的能力值就会加bi&#xff1b;如…...

编程日记 2025/8/8 11:18:05

gitee提交大文件夹

# 安装 Git LFS&#xff08;如果未安装&#xff09; git lfs install# 跟踪整个大文件夹&#xff08;或特定大文件类型&#xff09; git lfs track "big_folder/**" # 替换为你的文件夹名# 提交并推送 git add .gitattributes big_folder/ git commit -m "add …...

编程日记 2025/8/11 19:33:46

纯CSS实现自动滚动到底部

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>自动滚动到底部</title><style>*…...

编程日记 2025/8/8 4:59:10

WInform当今技术特性分析

Windows Forms (WinForms) 技术特性分析 引言 Windows Forms (WinForms) 作为微软最早推出的基于.NET的图形用户界面开发框架&#xff0c;已经存在了20多年。在如今充满了各种现代UI框架的软件开发生态系统中&#xff0c;WinForms仍然保持着其独特的地位。本文将深入分析WinF…...

编程日记 2025/8/11 0:32:53

6.5 GitHub监控系统实战：双通道采集+动态调度打造高效运维体系

GitHub Sentinel Agent 定期更新功能设计与实现 关键词：GitHub API 集成、定时任务调度、Python 爬虫开发、SMTP 邮件通知、系统稳定性保障 1. GitHub 项目数据获取功能 1.1 双通道数据采集架构设计 #mermaid-svg-ZHJIMXcMAyDHVhmV {font-family:"trebuchet ms",v…...

编程日记 2025/8/8 16:27:07

自动驾驶安全模型研究

自动驾驶安全模型研究 自动驾驶安全模型研究 自动驾驶安全模型研究1.自动驾驶安全模型概述2. 自动驾驶安全模型应用3. 自动驾驶安全模型介绍3.1 Last Point to Steer3.2 Safety Zone3.3 RSS (Responsibility-Sensitive Safety)3.4 SFF (Safety Force Field)3.5 FSM (Fuzzy Safe…...

编程日记 2025/8/10 5:04:38

4090租用，各云GPU平台价格对比清单及建议

根据各平台的价格和型号配置&#xff0c;以下是通过DeepSeek-R1进行分析后&#xff0c;给出的建议。 一、按显存需求推荐 1.24G显存需求&#xff08;适合常规AI训练/推理、中小模型&#xff09; 性价比首选&#xff1a;智星云&#xff08;1.35元/小时&#xff09; &#xff0…...

编程日记 2025/8/13 20:17:01

Linux:简单指令（二）

文章目录 man ~~echocatcp指令which ~~mvless时间相关的指令find 要么对内容要么对属性操作 决定路径开始定位文件&#xff0c;也可以相对路径 家目录/ man ~~ 1查询具体命令 我们可以man man 可以看man 的描述 我们可以man 数字 ~~ 可以从上到下查询 2查询仿命令 3查询具体接口…...

编程日记 2025/8/2 17:18:32

代码随想录算法训练营day7（字符串）

华子目录 反转字符串中的单词思路 右旋字符串思路 反转字符串中的单词 https://leetcode.cn/problems/reverse-words-in-a-string/description/ 思路 先将字符串s按照空格切分为列表s_list&#xff08;使用s.split()&#xff09;再进行反转操作再将列表拼接为字符串&#xff…...

编程日记 2025/8/12 23:58:49

Android studio—socketIO库的emit与return的使用

文章目录 一、Socket.IO库简单使用说明1. 后端 Flask Flask-SocketIO2. Android 客户端集成 Socket.IO3. 布局文件注意事项 二、接受服务器消息的二种方法1. 客户端接收通过 emit 发送的消息功能使用场景后端代码&#xff08;Flask-SocketIO&#xff09;客户端代码&#xff08…...

编程日记 2025/8/2 17:18:25

【Drools+springboot3规则匹配】

文章目录 一、 业务场景概述二、整体技术架构三、Drools概述1. Drools 简介2. Drools Rete 算法与flink-cep的区别？2.1 Rete 算法概述2.2 Flink CEP 概述四、代码实现4.1 导入依赖4.2 从kafka消费数据4.3 核心类，触发匹配操作并将匹配数据写入mysql4.4 Drools 管理4.5 相关的…...

编程日记 2025/8/13 11:34:54

MAC-如果是分页查询，怎么分批次in；基于多线程的分页查询工具类

如果是分页查询，in怎么分批 在处理分页查询时，如果 IN 子句中的参数数量过大（例如超过数据库限制，如 MySQL 的 max_allowed_packet 或性能瓶颈），可以通过 ​​分批查询​​ 和 ​​结果合并​​ 的方式解决。以下是具体实现步骤： ​​1. 核心思路​​ 将大的 IN 列表拆…...

编程日记 2025/8/13 10:18:55

【MySQL】Ubuntu下C++连接MySQL

C连接MySQL ubuntu下载MySQL1.构建mysql对象&#xff0c;获得mysql访问句柄2.mysql的连接3.向mysqld下达命令(增删改)3.C_C查询细节处理3.1 下达查询命令3.2 转储查询结果3.3显示查询结果 4.编译链接 ubuntu下载MySQL sudo apt install libmysqlclient-dev下载完毕&#xff0c…...

编程日记 2025/8/13 6:30:29

二月公开赛 宝塔搭建Web-ssrfme环境以及漏洞复现

一.环境搭建 1.1宝塔安装docker 1.2将Web-ssrfme压缩文件放入Ubuntu并解压 rooteden-virtual-machine:/# mkdir Web-ssrfmerooteden-virtual-machine:/Web-ssrfme# ll total 2956 drwxr-xr-x 2 root root 4096 4月 18 02:43 ./ drwxr-xr-x 24 root root 4096 4月 18…...

编程日记 2025/8/10 15:49:23

2021 CCF CSP-S2.廊桥分配

目录 题目算法标签: 模拟, 贪心, 堆思路代码 题目 4090. 廊桥分配 算法标签: 模拟, 贪心, 堆 思路 可以将每个飞机的起始时间和离开时间看作一个线段, 每个廊桥在同一时间只能服务一架飞机, 因为先到先得因此是按照起始时间进行排序 每个廊桥只关心最后一架飞机离开的时刻…...

编程日记 2025/8/12 2:30:20

博客标题栏添加一个 About Me

文章目录 ✅ 目标✍️ 第一步&#xff1a;创建 About 页面&#x1f9ed; 第二步&#xff1a;在导航栏添加菜单项&#x1f504; 第三步&#xff1a;重新启动本地服务&#x1fa84; 可选美化&#xff1a;自定义样式&#x1f4a1; 小贴士&#x1f389; 示例✅ 文件路径:✅ 页面代码…...

编程日记 2025/8/14 14:50:41

transient关键字深度解析

Java transient 关键字深度解析 1. 核心概念 (1) 基本定义 作用：标记字段不参与序列化 适用场景： 敏感数据（如密码、密钥） 临时计算字段 依赖运行时环境的字段（如Thread对象） (2) 语法示例 java public class User implements Serializable {private String username…...

编程日记 2025/8/14 4:28:52

解决 pip install tts 报错问题-—SadTalker的AI数字人视频—未来之窗超算中心

pip install -r requirements.txt pip install TTS0.11.1 指定版本 pip install TTS0.11.1...

编程日记 2025/8/14 22:17:04

Java 数据类型全解析：基础、引用与包装类全面梳理

Java 中的数据类型分为两大类&#xff1a; &#x1f9e9; 一、基本数据类型&#xff08;Primitive Types&#xff09; 共 8 种&#xff0c;分为 数值类型、字符类型、布尔类型&#xff1a; 类型占用内存默认值说明byte1 字节0整数类型&#xff0c;范围 -128 ~ 127short2 字节…...

编程日记 2025/8/10 5:34:30

Linux计划任务详解：原理、优缺点及应用

Linux计划任务详解&#xff1a;原理、优缺点及应用 文章目录 Linux计划任务详解&#xff1a;原理、优缺点及应用计划任务的基本原理Cron工作原理At工作原理 计划任务的优缺点优点缺点 crontab 命令详解&#xff1a;用法与选项全指南基本语法常用选项详解1. 编辑 cron 任务 (-e)…...

编程日记 2025/8/13 23:37:09