React中的受控组件和非受控组件

最新推荐文章于 2024-08-03 09:28:46 发布
最新推荐文章于 2024-08-03 09:28:46 发布
阅读量106 收藏
点赞数
分类专栏： react 文章标签： react 受控组件 非受控组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40128347/article/details/103243982
版权

引入

受控组件和非受控组件的概念是从哪里来的呢？在HTML中，表单元素比如说input,textarea,select他们通常都是根据用户的输入来确定他们自己的状态，在React中可变状态通常保存在state中，只能通过this.setState()来进行修改

受控组件

假如说我们现在有一个表单，表单中有一个input标签，Input的value值必须设置在constructor构造函数中的state中，然后通过onChange来触发事件改变state中保存的value值，也就是说React负责渲染表单的组件仍然控制用户后续输入时所发生的变化

非受控组件

与受控组件相反，表单数据由dom元素自身管理的组件是非受控组件，意味着可以不设置它的state属性而是通过ref来操作真实的DOM

需要注意的是，非受控组件通常需要指定表单元素的初始值，不控制后续的更新，这种情况指定的是defaultVal属性而不是value属性

sweet1224a
关注
专栏目录
React中受控组件和非受控组件
GZZ__z的博客
11-09 534
一，受控组件 1.概念： 受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。 好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。 2.步骤： a.在state中定义状态 b.对表单元素做两件事: 设置value为
React的受控组件和非受控组件
xihuhu的博客
11-10 180
1.什么是非受控组件 从react官方文档介绍中可以得知：在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。 2.非受控组件的使用 借助于ref，使用原生DOM的方式来获取表单元素的值 使用步骤分为4步： 1.导入：import{createRef } from 'react' 2.调用createRef方法创建引用，假设一个名字 const xxx=creat..
React 中 受控组件和非受控组件区别
qq_45803050的博客
05-11 683
React 中 受控组件和非受控组件区别 广义的来说： react 组件的数据渲染是否被调用者传递的 props 完全控制，控制则为受控组件，否则为非受控组件 非受控组件： 非受控组件将真实数据存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成React 和 非 React 代码，如果不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量，否则，就使用受控组件 非受控方式能简化代码，比较适用于就在本组件的数据处理，如果要关联到要把数据传出去的话，其中不会再次调用 s
React 中的受控组件和非受控组件
My_wife_QBL的博客
08-03 767
受控组件是指其输入值由 React 组件的状态（state）进行控制的组件。在受控组件中，表单元素的值由组件的状态驱动，任何对输入值的更改都需要通过状态更新来实现。非受控组件是指其输入值不由 React 组件的状态控制，而是通过直接操作 DOM 元素来获取输入值。通常来说，非受控组件使用 React 的ref来访问 DOM 元素并获取其值。受控组件和非受控组件在 React 中各有其独特的使用场景和优势。受控组件通过 React 状态管理输入，提供了更好的可控性和灵活性，适合于复杂的表单处理和实时反馈；
浅谈react受控组件与非受控组件(小结)
08-28
React 中的受控组件和非受控组件是两种不同的表单组件类型，它们之间的区别在于是否可以由外部控制组件的值。本文将详细介绍受控组件和非受控组件的概念、特点和使用场景。 一、非受控组件 非受控组件是一种不受...
react中受控组件与非受控组件
m0_45382009的博客
03-05 594
​ 在HTML中，表单元素（如：input textarea select通常自己维护state,并根据用户输入进行更新。而在react中，可变状态通常保存在组件的state属性中，并且只能通过使用setState()来更新。 1. 受控組件 ​ react官网简述：https://zh-hans.reactjs.org/docs/forms.html#controlled-components 每当输入框内容发生变化时，都会被写入组件的state中，这种组件在react中别理解为 受控组件
react中受控组件和非受控组件
06-08
React中的组件可以分为两种类型：受控组件和非受控组件。 受控组件是指表单元素的值由React控制的组件，例如input、textarea和select等元素。这些组件的值通常由父组件通过props传递并在回调函数中更新，每当用户...
【React】之受控组件和非受控组件
m0_48982503的博客
03-11 5051
React中的组件根据是否受React控制可分为受控的和非受控的。 一、受控组件 表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似. 受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验. 受控组件只有继承React.Component才会有状态. 受控组件必须要在表单上使用onChange事件来绑定对应的事件. import React, { Component } from 'react' export default cl
08-React redux
09-14
redux 相关代码以及 redux 开发者工具
C#中的数据库迁移是如何实现的
09-14
在C#中，数据库迁移是Entity Framework（EF）的一个核心功能，它允许开发者通过代码变更来更新数据库结构。以下是如何在C#中使用Entity Framework实现数据库迁移的详细步骤和代码示例。 Entity Framework的迁移功能为C#开发者提供了一种强大的工具，用于管理和应用数据库架构的变更。通过上述步骤和命令，可以在开发过程中轻松地同步模型和数据库的更改。在实际开发中，应确保在应用迁移之前充分测试，以避免数据丢失或不一致的问题。 在C#中，数据库迁移是Entity Framework（EF）的一个核心功能，它允许开发者通过代码变更来更新数据库结构。以下是如何在C#中使用Entity Framework实现数据库迁移的详细步骤和代码示例。 Entity Framework的迁移功能为C#开发者提供了一种强大的工具，用于管理和应用数据库架构的变更。通过上述步骤和命令，可以在开发过程中轻松地同步模型和数据库的更改。在实际开发中，应确保在应用迁移之前充分测试，以避免数据丢失或不一致的问题。
RS485数据收发程序示例
09-14
RS485数据收发程序示例
基于ssm的闲置图书分享平台系统设计与实现.docx
09-14
基于ssm的闲置图书分享平台系统设计与实现.docx
C#中的Lambda表达式：简化委托与表达式树
09-14
在C#编程语言中，Lambda表达式提供了一种简洁的方式来表示匿名函数，即没有具体名称的函数。Lambda表达式在C# 3.0中引入，作为.NET Framework的一部分，它们在LINQ（Language Integrated Query）查询中尤其有用，但也可以用于任何需要委托类型的地方。 Lambda表达式是C#中一个非常强大和灵活的特性，它允许以简洁的方式编写匿名函数。Lambda表达式可以用于委托、表达式树、LINQ查询等多种场景。通过使用Lambda表达式，开发者可以编写更加简洁、可读和可维护的代码。理解Lambda表达式的工作原理和使用场景对于编写高效的C#程序至关重要。 在C#编程语言中，Lambda表达式提供了一种简洁的方式来表示匿名函数，即没有具体名称的函数。Lambda表达式在C# 3.0中引入，作为.NET Framework的一部分，它们在LINQ（Language Integrated Query）查询中尤其有用，但也可以用于任何需要委托类型的地方。 Lambda表达式是C#中一个非常强大和灵活的特性，它允许以简洁的方式编写匿名函数。Lambda表达式可以
Web实验报告Web实验报告pdf
09-14
设计制作一个《网页设计与制作》精品课程网站 二.实验要求: (1)站点目录:要求层次分明，不能将内容都放在站点根目录下;不要使用中文;为每种类型文件都建立一个独立的目录。(例如images文件夹用于存放图象,目录的层次 不能没有，但必须尽量少，以便于管理.) (2)填写网站设计报告:必须认真填写网站设计报告中的每一项，完成网站结构的设计说明，包括以下各项内容: 1)网站主题:必须围绕一个确定主题创建网站，否则成绩以不及格计。 2)站点名称:必须为自己的站点命名，名称要紧扣站点主题，并反映在每个网页上。 3)站点根文件夹:以个人学号及姓名命名。 4)文件与文件夹:网站内使用的图片放在images文件夹中,主页以index.htm命名,其它文件夹自已命名,要以有意义的英文字母来命名,不要使用中文,网页文件也要使用有意义的英文来命名。 5)站点结构:分类存放网站中的资源，一律以树型目录结构表示并说明文件夹的用途。 6)站点地图:以结构图方式给出网页的名称和各页面间的超级链接。
视频网站系统 基于Springboot和Mysql的视频网站系统代码 ，包括程序，中文注释，配置说明操作步骤
09-14
视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统-视频网站系统 1、资源说明：视频网站系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBoot ④ 架构:B/S、MVC ⑤ 开发环境:IDE
『人事流程图新』人事工作流程3774211768.doc
09-14
『人事流程图新』人事工作流程3774211768.doc
数据特征，数据特征，数据特征
最新发布
09-14
数据特征，数据特征，数据特征 数据特征，数据特征，数据特征 数据特征，数据特征，数据特征 数据特征，数据特征，数据特征
续订劳动合同通知书.docx
09-14
续订劳动合同通知书.docx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值