react 受控组件和非受控组件

在 React 中,受控组件和非受控组件是两种处理表单元素(如输入框、选择框等)值的方式。

1. 受控组件

受控组件是指 React 组件的表单元素的值是由 React 组件的 state 来管理的。换句话说,React 会全程控制表单元素的值,每当输入框的内容发生变化时,都会触发事件(如 onChange),并更新组件的 state,从而使组件重新渲染。

特点:

  • 表单的值由 React 的 state 控制。
  • 必须通过 state 和 setState 来读取和修改表单元素的值。
  • 更容易实现表单验证和其他交互逻辑。

示例:

import React, { useState } from 'react';function ControlledInput() {const [value, setValue] = useState('');const handleChange = (e) => {setValue(e.target.value);  // 更新 state};return (<inputtype="text"value={value}          // 由 state 控制值onChange={handleChange} // 更新 state/>);}

2. 非受控组件(Uncontrolled Component)

非受控组件是指表单元素的值不受 React state 的控制,而是通过 DOM 元素的本地状态来处理。这意味着 React 不会直接管理表单元素的值,值的管理交由 DOM 本身来控制。

特点:

  • 表单的值由 DOM 控制,而非 React state。
  • 可以通过 ref 获取当前表单元素的值,而不需要设置 value 和 onChange 处理事件。
  • 更接近传统的 HTML 表单操作方式,适合简单场景。

示例:

import React, { useRef } from 'react';function UncontrolledInput() {const inputRef = useRef(null);const handleSubmit = (e) => {e.preventDefault();alert('输入的值是: ' + inputRef.current.value); // 使用 ref 获取值};return (<form onSubmit={handleSubmit}><input type="text" ref={inputRef} />  {/* 不需要 value 和 onChange */}<button type="submit">提交</button></form>);
}

总结:

  • 受控组件适用于复杂的交互场景(如表单验证、动态表单等),可以让 React 完全控制表单的行为。
  • 非受控组件适用于简单场景,尤其是当表单不需要频繁的与 React 的 state 交互时。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/15495.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

网络基础-超文本协议与内外网划分(超长版)

一、超文本协议 1. HTTP协议简介 1.1. 网络架构简单介绍 (1). C/S架构&#xff08;Client/Server架构&#xff09; (2). B/S架构&#xff08;Browser/Server&#xff09; 总结对比 2. HTTP协议版本 2.1. HTTP/0.9 &#xff08;1991年发布&#xff09; 2.2. HTTP/1.0 &a…

5分钟搞懂 Golang 堆内存

本文主要解释了堆内存的概念&#xff0c;介绍了 Linux 堆内存的工作原理&#xff0c;以及 Golang 如何管理堆内存。原文: Understanding Heap Memory in Linux with Go 你想过为什么堆内存被称为 "堆" 吗&#xff1f;想象一下杂乱堆放的对象&#xff0c;与此类似&…

今日 AI 简报 | 开源 RAG 文本分块库、AI代理自动化软件开发框架、多模态统一生成框架、在线图像背景移除等

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

【C++学习(35)】在Linux中基于ucontext实现C++实现协程(Coroutine),基于C++20的co_await 协程的关键字实现协程

文章目录 为什么使用协程协程的理解协程优势协程的原语操作yield 与 resume 是一个switch操作&#xff08;三种实现方式&#xff09;&#xff1a; 基于 ucontext 的协程基于 XFiber 库的操作1 包装上下文2 XFiber 上下文调度器2.1 CreateFiber2.2 Dispatch 基于C20的co_return …

技术段子——论如何在0.387秒以内获取到闲鱼的上新数据。

个人一直在做闲鱼辅助相关的工具类软件。因为知道阿里系请求和风控的原因&#xff0c;再加个人做软件一直想的是如何让用户稳定运行。 因为阿里系对于请求的风控&#xff0c;所以个人风格导到软件效率一直一般。并不是做不到快速抓取&#xff0c;而是用效率换稳定。 所以&#…

【C#设计模式(10)——装饰器模式(Decorator Pattern)】

前言 装饰器模式可以在运行时为对象添加额外的功&#xff0c;而无需修改原始对象的代码。这种方式比继承更加灵活。 代码 //蛋糕类&#xff08;抽象类&#xff09; public abstract class Cake {public abstract void Create(); } //奶油蛋糕类 public class CreamCake : Cak…

2025年PMP考试安排是怎样?备考计划与重要时间节点公布

PMP考试在中国大陆每年举行四次&#xff0c;分别是在3月、6月、9月和12月。而中国港澳台地区的PMP考试则可以每天进行机考。在中国大陆地区的笔试考试中&#xff0c;主要采用涂卡和机读卡来记录成绩。 每次PMP考试的时间都是在周六的9点到12点50分&#xff0c;共计230分钟。 P…

缓冲式线程池C++简易实现

前言 : 代码也比较短&#xff0c;简单说一下代码结构&#xff0c;是这样的&#xff1a; SyncQueue.hpp封装了一个大小为MaxTaskCount的同步队列&#xff0c;这是一个模板类&#xff0c;它在线程池中承担了存放任务等待线程组中的线程来执行的角色。最底层是std::list<T>…

推荐一款功能强大的光学识别OCR软件:Readiris Dyslexic

Readiris Dyslexic是一款功能强大的光学识别OCR软件&#xff0c;可以扫描任何纸质文档并将其转换为完全可编辑的数字文件(Word&#xff0c;Excel&#xff0c;PDF)&#xff0c;然后用你喜欢的编辑器进行编辑。该软件提供了一种轻松创建&#xff0c;修改和签名PDF的完整解决方法&…

【面试全纪实 | Nginx 04】请回答,你真的精通Nginx吗?

&#x1f5fa;️博客地图 &#x1f4cd;1、location的作用是什么&#xff1f; &#x1f4cd;2、你知道漏桶流算法和令牌桶算法吗&#xff1f; &#x1f4cd;3、Nginx限流怎么做的&#xff1f; &#x1f4cd;4、为什么要做动静分离&#xff1f; &#x1f4cd;5、Nginx怎么做…

如何为你的 SaaS 公司做好国际化发展的准备?

随着 SaaS&#xff08;软件即服务&#xff09;公司的不断发展&#xff0c;确定扩张机会并建立可扩展的流程和策略以支持这些机会变得至关重要。一些公司向上游市场扩张&#xff0c;向企业销售产品&#xff0c;而此前他们主要面向中小企业。一些公司则朝着相反的方向发展&#x…

Towards Reasoning in Large Language Models: A Survey

文章目录 题目摘要引言什么是推理?走向大型语言模型中的推理测量大型语言模型中的推理发现与启示反思、讨论和未来方向 为什么要推理?结论题目 大型语言模型中的推理:一项调查 论文地址:https://arxiv.org/abs/2212.10403 项目地址: https://github.com/jeffhj/LM-reason…

推荐一款硬盘数据清除工具:Macrorit Data Wiper

Macrorit Data Wiper是一款硬盘数据清除工具&#xff0c;用于安全擦除数据、分区和磁盘的一站式工具包。完全擦除系统/引导分区。许多程序文件默认存储在系统磁盘驱动器中。如果您或您的组织想要永久擦除磁盘驱动器以防止未经授权使用您的数据&#xff0c;则此功能是必要的。 为…

第13章 Zabbix分布式监控企业实战

企业服务器对用户提供服务,作为运维工程师最重要的事情就是保证该网站正常稳定的运行,需要实时监控网站、服务器的运行状态,并且有故障及时去处理。 监控网站无需人工时刻去访问WEB网站或者登陆服务器去检查,可以借助开源监控软件例如Zabbix、Cacti、Nagios、Ganglia等来实…

2024IJCAI | MetalISP: 仅用1M参数的RAW到RGB高效映射模型

文章标题是&#xff1a;《MetaISP:Effcient RAW-to-sRGB Mappings with Merely 1M Parameters》 MetaISP收录于2024IJCAI&#xff0c;是新加坡国立大学&#xff08;Xinchao Wang为通讯作者&#xff09;和华为联合研发的新型ai-isp。 原文链接&#xff1a;MetaISP 【1】论文的…

使用 ts-node 运行 ts文件,启动 nodejs项目

最近在写一个nodejs项目&#xff0c;使用 ts-node 启动项目。遇到了一些问题&#xff0c;在此记录一下。 ts-node 是 TypeScript 执行引擎和 Node.js 的 REPL(一个简单的交互式的编程环境)。 它能够直接在 Node.js 上执行 TypeScript&#xff0c;而无需预编译。 这是通过挂接…

《鸿蒙生态:开发者的机遇与挑战》

一、引言 在当今科技飞速发展的时代&#xff0c;操作系统作为连接硬件与软件的核心枢纽&#xff0c;其重要性不言而喻。鸿蒙系统的出现&#xff0c;为开发者带来了新的机遇与挑战。本文将从开发者的角度出发&#xff0c;阐述对鸿蒙生态的认知和了解&#xff0c;分析鸿蒙生态的…

PHP代码审计 - SQL注入

SQL注入 正则搜索(update|select|insert|delete).*?where.*示例一&#xff1a; bluecms源码下载&#xff1a;source-trace/bluecms 以项目打开网站根目录&#xff0c;并以ctrlshiftf打开全局搜索 (update|select|insert|delete).*?where.*并开启正则匹配 最快寻找脆弱点的…

Essential Cell Biology--Fifth Edition--Chapter one (5)

1.1.4 The eukaryotic cell [真核细胞] 真核细胞&#xff0c;一般来说&#xff0c;比细菌和古细菌更大&#xff0c;更复杂。有些是独立的单细胞生物&#xff0c;如变形虫和酵母&#xff08;图1-14&#xff09;&#xff1b;另一些则生活在多细胞集合中。所有更复杂的多细胞生物…

线程-2-线程概念与控制

main 线程常见寄存器&#xff08;CR3 EIP IR MMU TLB&#xff09; CR3是当前进程页表物理内存地址&#xff08;包不能虚拟地址&#xff0c;不然套娃了&#xff09; CPU中有寄存器指向task_struct* current EIP&#xff1a;入口虚拟地址 IR&#xff1a;当前命令地址系统总线&a…