在react中说说对受控组件和非受控组件的理解?以及应用场景

在react中说说对受控组件和非受控组件的理解?以及应用场景

  • 回答思路:说说受控组件-->说说非受控组件-->应用场景
    • 受控组件:
    • 非受控组件
    • 应用场景

回答思路:说说受控组件–>说说非受控组件–>应用场景

受控组件:

简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据
举例:

class TestComponent extends React.Component{constructor(props){super(props);this.state = {username:'Tom'};}render(){return <input name="username" value={this.state.username}></input>	}
}

这时候当我们在输入框输入内容时,会发现输入的内容无法显示出来,此时input标签是一个可读的状态,因为value被this.state.username所控制,当用户输入时,this.state.username不会自动更新,这样的话input的内容就不会发生变化了,想要解除被控制,可以为input标签设置onChange事件,触发的时候更新state,从而导致input框内容更新

非受控组件

简单来讲,就是不受我们控制的组件,一般情况是在初始化的时候接受外部数据,然后自己在内部存储自身状态,当需要时,可以使用ref查询DOM并查找当前值,如下:

import React,{Component} form 'react';
export class ExampleComp extedns Component{constructor (props){super(props);this.inputRef = React.createRef();}handleSubmit = (e) =>{console.log("获取input框的值为:",this.inputRef.current.value);e.preventDefault();}render(){return (<form onSubmit={e => this.handleSubmit(e)}><input defaultValue="Tom" ref={this.inputRef} /><input type="submit" value="提交" /></form>)}
}

应用场景

大多数推荐使用受控组件来实现表单,因为受控组件表单数据由React组件负责处理,非受控组件控制能力弱,表单数据由DOM本身处理,但更加方便快捷,代码量少

特征不受控组件受控组件
一次性取值,如提交时
提交时验证
即时现场验证×
有条件地禁用提交按钮×
强制输入格式×
一个数据的多个输入×
动态输入×

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

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

相关文章

【GitHub项目推荐--GitHub 上的考研神器】【转载】

如果有打算考研的读者&#xff0c;这些开源项目不能错过。把各个学校近几年考研初试真题分享给大家&#xff08;包括 408&#xff09;&#xff0c;应该能帮上大家&#xff0c;文末有下载方式。 同时&#xff0c;我把盘点的开源相关的学习项目更新到 Awesome GiHub Repo&#xf…

YOLOv8改进 | Conv篇 | 2024.1月最新成果可变形卷积DCNv4(全网独家首发,附详细教程)

一、本文介绍 本文给大家带来的改进机制是2024-1月的最新成果DCNv4,其是DCNv3的升级版本,效果可以说是在目前的卷积中名列前茅了,同时该卷积具有轻量化的效果!一个DCNv4参数量下降越15Wparameters左右,。它主要通过两个方面对前一版本DCNv3进行改进:首先,它移除了空间聚…

在 Windows 操作系统上安装和配置 Flutter 开发环境

在 Windows 操作系统上安装和配置 Flutter 开发环境 系统配置要求 为了成功安装和运行 Flutter&#xff0c;确保您的开发环境满足以下基本需求&#xff1a; 操作系统&#xff1a;Windows 7 SP1 或更高版本。处理器&#xff1a;支持 64 位的架构。磁盘空间&#xff1a;至少预留…

【GitHub项目推荐--智能家居项目】【转载】

如果你具备硬件、软件知识&#xff0c;这个项目肯定符合你的胃口。 物美智能是一套软硬件结合的开源项目&#xff0c;该系统可助你快速搭建自己的智能家居系统。你可以学习到设备的集成和软硬件交互。 PC 端或者手机与服务端通信&#xff0c;单片机可以接受遥控设备和服务器的…

什么是DNS隐蔽信道?如何防御?

DNS隐蔽信道是一种利用域名系统(Domain Name System,DNS)进行数据传输的技术,它可以在不引起用户和网络安全系统注意的情况下,通过DNS查询和响应传输信息。由于DNS协议的设计初衷是为了解析域名到IP地址的映射,它通常不被视为用于传输大量数据的协议。然而,攻击者可以滥…

硬件-11-服务器的基础知识

参考服务器基础知识大科普 1 电视剧背景 服务器被誉为互联网之魂。 电视剧《创业年代》是一部有冯绍峰和袁姗姗等人联手主演的一部讲述我国第一批科技创业者创业故事的电视剧&#xff0c;可以说是他们铲下了建设中关村的第一捧土。 电视剧《创业年代》中的潮信公司并没有…

【神经网络】火箭点火发射-诠释一场数据与学习的奇妙之旅

火箭点火发射来理解神经网络的故事细节 在一个充满科技气息的研究室里&#xff0c;一群科学家们正在忙碌地准备着一次重要的火箭点火发射。这次发射不仅是一次航天探索的壮丽征程&#xff0c;更是一场利用神经网络处理数据的智慧之旅。 在火箭发射的背后&#xff0c;神经网络…

中仕教育:研究生毕业可以考选调生吗?

选调生的报考条件之一是应届生&#xff0c;研究生毕业也属于应届生&#xff0c;所以是可以报考的。 选调生不同学历的年龄限制&#xff1a; 1.应届本科生&#xff1a;年龄在25岁以内 2.应届研究生&#xff1a;年龄在30岁以内 3.应届博士生&#xff1a;年龄在35岁以内 研究…

for...in、for...of、for...Each的详细区别!

for...in for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性&#xff0c;包括继承的可枚举属性。 仅迭代自身的属性 如果你只要考虑对象本身的属性&#xff0c;而不是它的原型&#xff0c;那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属…

excel统计分析——Tukey法多重比较

参考资料&#xff1a;生物统计学 https://real-statistics.com/one-way-analysis-of-variance-anova/unplanned-comparisons/tukey-hsd/ Tukey法是基于学生化极差分布计算最小显著极差&#xff08;LSR&#xff09;&#xff0c;根据平均数个数调整最小显著极差。 LSR&#xff1…

Steam++(Watt Toolkit)加速GitHub失效特殊情况

github无法访问有很多情况&#xff0c;网上已经有很多解决方法&#xff0c;这里说一种特殊情况 如果你满足下列条件&#xff1a; 1、使用过Steam&#xff08;Watt Toolkit&#xff09;加速GitHub&#xff1b; 2、某天突然发现Steam&#xff08;Watt Toolkit&#xff09;对GitH…

LINUX常用工具之sudo权限控制

一、Sudo基本介绍 sudo是Linux 中用于允许特定用户以超级用户或其他特权用户的身份执行特定的命令或任务。sudo 提供了一种安全的方法&#xff0c;使用户能够临时获取额外的权限&#xff0c;而不需要以完全超级用户的身份登录系统。sudo也可以用了设置黑名单命令清单&#xff…

ROS第 13 课 TF 坐标系广播与监听的编程 实现

文章目录 第 13 课 TF 坐标系广播与监听的编程 实现1.机器人的坐标变换2.创建功能包3.编程方法3.1 编写广播和监听程序3.2 运行程序 第 13 课 TF 坐标系广播与监听的编程 实现 1.机器人的坐标变换 在进行编程前&#xff0c;先需要了解机器人的坐标变换。这里以运行海龟案例来…

体验开源香山高性能开源 RISC-V 处理器

整体架构设计 香山处理器是乱序六发射结构设计&#xff0c;目前支持 RV64GCBK 扩展。香山处理器前端流水线包括分支预测单元、取指单元、指令缓冲等单元&#xff0c;顺序取指。后端包括译码、重命名、重定序缓冲、保留站、整型/浮点寄存器堆、整型/浮点运算单元。 doc https…

有关软件测试的,任何时间都可以,软件测试主要服务项目:测试用例 报告 计划

有关软件测试的&#xff0c;任何时间都可以&#xff0c;软件测试主要服务项目&#xff1a; 1. 测试用例 2. 测试报告 3. 测试计划 4. 白盒测试 5. 黑盒测试 6. 接口测试 7.自动…

Vuex的基础使用

在使用之前要先了解Vuex的组成结构&#xff0c;跟对应的使用关系。 在上图的结构图中可以看到四个组成部分&#xff0c;首先是Components&#xff08;组件&#xff09;、Actions&#xff08;行动&#xff09;、Mutations&#xff08;变化&#xff09;、state&#xff08;状态/数…

Vue——计算属性

文章目录 计算属性computed 计算属性 vs methods 方法计算属性完整写法 综合案例&#xff1a;成绩案例 计算属性 概念&#xff1a;基于现有的数据&#xff0c;计算出来的新属性。依赖的数据变化&#xff0c;自动重新计算 语法: ①声明computed配置项中&#xff0c;一个计算属性…

清华大学计算机学科推荐学术会议和期刊列表——网络与信息安全

A类会议 这里仅列出A类会议 会议简称会议全程网址IEEE S&PIEEE Symposium on Security and Privacyhttp://dblp.uni-trier.de/db/conf/sp/NDSSISOC Network and Distributed System Security Symposiumhttp://dblp.uni-trier.de/db/conf/ndss/USENIX SecurityUsenix Secu…

nodejs学习计划--(三)http协议和IP介绍

一、 HTPP协议 1、概念 HTTP&#xff08;hypertext transport protocol&#xff09;协议&#xff1b;中文叫超文本传输协议 是一种基于TCP/IP的应用层通信协议 这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。 协议中主要规定了两个方面的内容 客户端&…

gin渲染篇

1. 各种数据格式的响应 json、结构体、XML、YAML类似于java的properties、ProtoBuf package mainimport ("github.com/gin-gonic/gin""github.com/gin-gonic/gin/testdata/protoexample" )// 多种响应方式 func main() {// 1.创建路由// 默认使用了2个中…