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.mzph.cn/news/886191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cesium 3DTiles之pnts格式详解

Point Cloud 1 概述 点云&#xff08;Point Cloud&#xff09;瓦片格式用于高效流式传输大规模点云数据&#xff0c;常用于 3D 可视化中。每个点由位置&#xff08;Position&#xff09;和可选的属性定义&#xff0c;这些属性用来描述点的外观&#xff08;如颜色、法线等&…

基于STM32的智能家居安防系统设计

引言 本项目基于STM32微控制器设计了一个智能家居安防系统&#xff0c;通过集成多个传感器模块和远程报警系统&#xff0c;实现对家庭的安全监控和自动化报警功能。该系统能够实时监测家中的门窗状态、烟雾浓度、以及是否有非法入侵等状况&#xff0c;并在检测到异常时通过蜂鸣…

用枚举算法解决LeetCode第3348题最小可整除数位乘积II

3348.最小可整除数位乘积II 难度&#xff1a;困难 问题描述&#xff1a; 给你一个字符串num&#xff0c;表示一个正整数&#xff0c;同时给你一个整数t。 如果一个整数没有任何数位是0&#xff0c;那么我们称这个整数是无零数字。 请你返回一个字符串&#xff0c;这个字符…

F5全新报告揭示AI时代API安全面临严峻挑战

F5 《2024年应用策略现状报告:API安全》揭示了 API 保护中的漏洞以及对全面安全措施的迫切需求 西雅图,2024年11月11日 – F5(NASDAQ: FFIV)日前发布《2024年应用策略现状报告:API 安全》(以下简称为“报告”),揭示了跨行业API安全面临的严峻现状。该报告强调了企业API保护方面…

【SpringBoot】20 同步调用、异步调用、异步回调

Git仓库 https://gitee.com/Lin_DH/system 介绍 同步调用&#xff1a;指程序在执行时&#xff0c;调用方需要等待函数调用返回结果后&#xff0c;才能继续执行下一步操作&#xff0c;是一种阻塞式调用。 异步调用&#xff1a;指程序在执行时&#xff0c;调用方在调用函数后立…

ESLint 使用教程(五):ESLint 和 Prettier 的结合使用与冲突解决

系列文章 ESLint 使用教程&#xff08;一&#xff09;&#xff1a;从零配置 ESLint ESLint 使用教程&#xff08;二&#xff09;&#xff1a;一步步教你编写 Eslint 自定义规则 ESLint 使用教程&#xff08;三&#xff09;&#xff1a;12个ESLint 配置项功能与使用方式详解 ES…

Qt_day5_常用类

常用类 目录 1. QString 字符串类&#xff08;掌握&#xff09; 2. 容器类&#xff08;掌握&#xff09; 2.1 顺序容器QList 2.2 关联容器QMap 3. 几种Qt数据类型&#xff08;熟悉&#xff09; 3.1 跨平台数据类型 3.2 QVariant 统一数据类型 3.3 QStringList 字符串列表 4. QD…

VBA学习笔记:基础知识

1.打开编辑器 工具-选项&#xff0c;可设置编辑器字体大小等 2. 运行 快捷键F5&#xff0c;或 运行-运行宏 若提示宏被禁止&#xff0c;解决办法之一&#xff1a;工具-宏-安全性-安全级-中&#xff0c;关闭excel重新打开&#xff0c;启用宏 保存文件格式为xla或xlam 3. 基本…

【CANOE】【学习】【DecodeString】字节转为中文字符输出

系列文章目录 文章目录 系列文章目录前言一、DecodeString 转为中文字节输出二、代码举例1.代码Demo2.DecodeString 函数说明函数语法&#xff1a;参数说明&#xff1a;返回值&#xff1a;使用示例&#xff1a;示例代码&#xff1a; 说明&#xff1a; 前言 有时候使用的时候&a…

oneplus6-编译-LineageOS-19.1-android12

lineage-19.1/oneplus6-build.md 修复内核崩溃 经过此两修改后, 编译出的OTA包 刷入手机, 手机重启正常越过logo 进入android, 但卡在LineageOS-19的弧形进度界面, 没有此两修改时, 根本进不到android, 只到开机logo就黑屏 亮呼吸灯 , 串口处于900E(高通ramdump模式), 因此…

C++单例模式实现

单例模式&#xff08;Singleton Pattern&#xff09;是软件设计模式中的一种&#xff0c;用于确保一个类只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。 一、初始版本&#xff08;手动创建释放&#xff09; 一个类只有一个实例的实现方法&#xff1a; 隐藏构…

超好用shell脚本NuShell mac安装

利用管道控制任意系统 Nu 可以在 Linux、macOS 和 Windows 上运行。一次学习&#xff0c;处处可用。 一切皆数据 Nu 管道使用结构化数据&#xff0c;你可以用同样的方式安全地选择&#xff0c;过滤和排序。停止解析字符串&#xff0c;开始解决问题。 强大的插件系统 具备强…

OpenJudge_ 简单英文题_04:0/1 Knapsack

题目 描述 Given the weights and values of N items, put a subset of items into a knapsack of capacity C to get the maximum total value in the knapsack. The total weight of items in the knapsack does not exceed C. 输入 First line: two positive integers N (…

算法训练(leetcode)二刷第二十六天 | *452. 用最少数量的箭引爆气球、435. 无重叠区间、*763. 划分字母区间

刷题记录 *452. 用最少数量的箭引爆气球435. 无重叠区间*763. 划分字母区间笨拙版进阶版 *452. 用最少数量的箭引爆气球 leetcode题目地址 先对气球的坐标按照Xstart进行升序排序&#xff0c;只要两个气球之间挨着就可以一箭射穿&#xff0c;因此排序后查看后一个气球的起始坐…

第12章 系统部署

12.1 Kickstart使用背景介绍 随着公司业务不断增加,经常需要采购新服务器,并要求安装Linux系统,并且要求Linux版本要一致,方便以后的维护和管理,每次人工安装linux系统会浪费掉更多时间,如果我们有办法能节省一次一次的时间岂不更好呢? 大中型互联网公司一次采购服务器…

深入探讨LINQ中的数据分块(Chunk)方法及其应用

LINQ作为C#的核心特性之一&#xff0c;大大简化了数据操作的复杂性。它不仅能够通过声明式的语法进行数据查询&#xff0c;还能实现复杂的数据操作&#xff0c;比如筛选、排序、分组等。而在众多LINQ操作中&#xff0c;Chunk方法作为一种数据分块功能&#xff0c;能够让开发者更…

【Window主机访问Ubuntu从机——Xrdp配置与使用】

使用Xrdp在Window环境下远程桌面访问Ubuntu主机 文章目录 Ubuntu安装图形化界面Ubuntu安装Xrdp通过网线连接两台主机Window主机有线连接配置Ubuntu从机设置测试有线连接 Window主机打开远程桌面功能参考文章总结 Ubuntu安装图形化界面 sudo apt update sudo apt upgrade sudo …

ECharts图表图例8

用eclipse软件制作动态单仪表图 用java知识点 代码截图&#xff1a;

实验6记录网络与故障排除

实验6记录网络与故障排除 实验目的及要求&#xff1a; 通过实验&#xff0c;掌握如何利用文档记录网络设备相关信息并完成网络拓扑结构的绘制。能够使用各种技术和工具来找出连通性问题&#xff0c;使用文档来指导故障排除工作&#xff0c;确定具体的网络问题&#xff0c;实施…

Javascript高级—常见算法

大数相加问题 function sumString(a, b){a a ;b n ;var arrA a.spilt(),arrB b.spilt(),distance arrA.length - arrB.length, // 计算两者的长度差&#xff0c;取最大的那个作为基准点len distance > 0 ? arrA.length : arrB.length,carry 0; // 表示相…