受控组件与非受控组件的选用标准

最新推荐文章于 2023-06-29 19:52:20 发布
最新推荐文章于 2023-06-29 19:52:20 发布
阅读量134 收藏
点赞数
分类专栏： 笔记 React 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50983325/article/details/116779385
版权
笔记 同时被 2 个专栏收录
76 篇文章 5 订阅
订阅专栏
React
18 篇文章 1 订阅
订阅专栏
本文探讨了React中受控组件和非受控组件的概念。受控组件通过state管理表单数据，能实时获取数据，但代码较复杂；非受控组件则让数据由DOM节点管理，简化代码，适用于简单场景。选择标准应根据项目需求，通常推荐使用受控组件以确保数据控制。
摘要由CSDN通过智能技术生成

非受控组件

  • 表单数据交由DOM节点管理. 特点是表单数据在需要时进行获取. 代码实现相对简单.
    在这里插入图片描述

受控组件

  • 表单数据交由state对象管理. 特点是可以实时得到表单数据. 代码相对复杂.
    在这里插入图片描述

选用标准

  • 总结: 受控组件和非受控组件都有其特点, 应该根据需求场进行选择. 在大多数情况下, 推荐使用受控组件处理表单数据.
    如果表单在数据交互方面比简单, 使用非受控表单, 否则使用受控表单.
    在这里插入图片描述
christian-dong
关注
专栏目录
浅谈React深度编程之受控组件与非受控组件
08-28
主要介绍了浅谈React深度编程之受控组件与非受控组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
raect - 受控组件与非受控组件的选用标准
weixin_38245947的博客
09-29 176
1.非受控组件 表单数据交由dom节点管理，特点是表单数据在需要时进行获取，代码实现相对简单。 function App() { const userInput = useRef() function handleSubmit(){ const username = userInput.current.value } return ( <form onSubmit={handleSubmit}> <input type="text" ref={userInput}/> &
React基础篇（五）：受控组件和非受控组件
zhehoon123的博客
07-30 294
一、受控组件和非受控组件的介绍 HTML表单在React中使用起来有所不同，官方文档是这么说的： 在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。 要在React里面实现HTML表单，必须做一些特殊处理。官方文档里面有两种方式：受控组件和非受控组件 但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。 有时使用受控组
react 表单受控和非受控
weixin_30849403的博客
04-09 112
参见：https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ 非受控： onSubmit = ()=>{ const val = this._input.value; } <input ref={input =>this._input=input}> 　　 受控：va...
1.17 受控组件和非受控组件
前端菜鸟
03-17 1553
1：受状态控制的组件，必须要有onchange方法，否则不能使用 2：受控组件可以赋予默认值（官方推荐使用受控组件） // 实现数据双向绑定 import React,{Component} from 'react' import ReactDOM from 'react-dom' class Input extends Component{ constructor(){ ...
Comopnent【受控组件与非受控组件的选用标准】
weixin_37883657的博客
07-23 98
1、非受控组件 表单数据交由DOM节点管理. 特点是表单数据在需要时进⾏获取. 代码实现相对简单 2、受控组件 表单数据交由state对象管理. 特点是可以实时得到表单数据. 代码相对复杂. 3、选用标准 总结: 受控组件和非受控组件都有其特点, 应该根据需求场进行选择. 在大多数情况下, 推荐使用受控组件处理表单数据。 如果表单在数据交互方便比较简单, 使用非受控表单, 否则使用受控表单. ...
受控组件与⾮受控组件的选⽤标准
Jacko-Lim
10-19 67
非受控组件 表单数据交由DOM节点管理，特点是表单数据在需要时进⾏获取，代码实现相对简单。 示例代码： import React, { useRef } from "react" function App(){ const username = useRef() const handleSubmit = event => { event.preventDefault() // 需要时获取数据 console.log(username.c
React 组件
青蛙king的博客
11-25 1021
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的，这些属性是应用程序中许多组件都需要的。这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。它们都是用来保存信息的，这些信息可以控制组件的渲染输出。react 的高阶组件可以看作是一个工厂函数，接收一个组件作为参数并返回一个具有新功能或特性的组件。
Kubernetes——K8s架构与组件原理
庄小焱
10-23 1036
摘要 本文将详细的介绍Kubernetes系统架构原理和工作流程。 kubernetes具有以下特性 服务发现和负载均衡 Kubernetes 可以使用 DNS 名称或自己的 IP 地址公开容器，如果进入容器的流量很大， Kubernetes 可以负载均衡并分配网络流量，从而使部署稳定。 存储编排 Kubernetes 允许你自动挂载你选择的存储系统，例如本地存储、公共云提供商等。 自动部署和回滚 你可以使用 Kubernetes 描述已部署容器的所需状态，它可以以受控的速率将实际状态 更改为
ASTMD277076标准【发动机冷却液模拟内部腐蚀试验方法】.doc
10-07
ASTM D277076标准是针对发动机冷却液在模拟条件下的内部腐蚀测试所设立的一套规范，旨在评估冷却系统组件和金属样品在特定环境下的耐腐蚀性。这个试验方法主要用于测试发动机冷却液对各种金属材料的影响，特别是在...
软考高级信息系统项目管理师系列论文之二十四：论项目开发模式的选择与应用
zhengzaifeidelushang的博客
02-21 315
软考高级信息系统项目管理师系列论文之二十四：论项目开发模式的选择与应用
PM_24 项目管理成熟度模型（了解）、26 知识产权与标准规范、收尾管理
chengyu0726的博客
02-12 1424
师马军老师主讲 ( 2 1 年 5 月课程 ) 项目管理成熟度模型 24.1 项目管理成熟度模型概述 1、项目管理成熟度模型在基于项目管理过程的基础上把企业项目管理水平从混乱到规范再到优 化的进化过程分成有序的多个等级，形成一个逐步升级的平台 2、项目管理成熟度模型的要素包括改进的内容和改进的步骤，使用该模型用户需要知道自己现 在所处的状态，还必须知道实现改进的路线图。项目管理成熟度模型有以不三个基本组成部分 3、Kerzner提出的项目成熟度模型分为5个梯级 （1）通用术语 （2）通用过程（3）单一方法（
2023年前端面试汇总-React
越陌度阡
06-29 858
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
uniapp 项目实践
热门推荐
weixin_50983325的博客
08-20 1万+
基于 UniAPP 社区论坛项目多端开发实战 学习目的： ​ 通过学习，基于 Vue 、微信小程序、uniapp 开发框架，对标企业级「大前端」开发实践标准，从零到一构建社区论坛类客户端应用项目全流程， 输出相关 H5、微信小程序、安卓、IOS 多客户端应用。 一、项目准备 1.1 项目业务逻辑介绍 相关文档 API 接口文档，详情查阅《 ThinkSNS 社区服务接口文档.md 》 ThinkSNS 综合管理系统，开源代码 git 地址：https://gitee.com/joysapp/t
React ---Mobx 6 的使用及案例
weixin_50983325的博客
05-08 4409
MobX6 1. MobX 概述 MobX 是一个简单的可扩展的状态管理库，无样板代码风格简约。 目前最新版本为 6，版本 4 和版本 5 已不再支持。 在 MobX 6 中不推荐使用装饰器语法，因为它不是 ES 标准，并且标准化过程要花费很长时间，但是通过配置仍然可以启用装饰器语法。 MobX 可以运行在任何支持 ES5 的环境中，包含浏览器和 Node。 MobX 通常和 React 配合使用，但是在 Angular 和 Vue 中也可以使用 MobX。 2. MobX 光速入门 2.1 下载 mob
React Native项目实战
weixin_50983325的博客
08-30 3743
调试接口 API 调试工具是用来对 API 接口进行调试的。比较出名的有 Postman，Insomnia、Postwoman 等。本节以 Insomnia 为例。 首先，需要跳转到 Insomnia 官网，下载（Insomnia Core）：https://insomnia.rest/download然后执行安装。 然后，配置开发环境。 配置完之后，就可以根据接口（例如：和风天气接口）的使用规则，在 Insomnia 中调试接口了。使用效果如下： 调用接口 React Native 提供了和 web
《 ThinkSNS 社区服务接口文档.md 》
weixin_50983325的博客
08-20 3010
社区服务 API 接口文档 基础相关信息 服务器请求地址：http://ts.lagou.uieee.com 客户端访问统一接口规则 ： /api/v2/ gitHub 完整 API 接口服务文档查阅：https://github.com/slimkit/slimkit.github.io/tree/gh-pages/docs 体验版前台地址：http://ts.lagou.uieee.com/feeds 后台管理系统地址： http://ts.lagou.uieee.com/admin
Electron基础
weixin_50983325的博客
09-09 2713
桌面应用
受控组件与非受控组件
最新发布
04-16
受控组件和非受控组件是在React中常用的两种组件形式，它们主要用于处理表单元素的状态和值。 1. 受控组件： 受控组件是指由React来管理表单元素的状态和值的组件。在受控组件中，表单元素的值由组件的state来控制，并通过onChange事件来更新state的值。当用户输入时，React会更新state的值，并重新渲染组件，从而实现表单元素的交互。 示例代码： ```jsx class ControlledComponent extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } handleChange(event) { this.setState({ value: event.target.value }); } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} /> ); } } ``` 2. 非受控组件： 非受控组件是指表单元素的状态和值由DOM自身管理的组件。在非受控组件中，我们可以通过ref属性获取表单元素的值，而不需要通过state来管理。这种方式适用于简单的表单场景，但不适用于需要对表单值进行复杂操作或验证的情况。 示例代码： ```jsx class UncontrolledComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit(event) { event.preventDefault(); console.log(this.inputRef.current.value); } render() { return ( <form onSubmit={this.handleSubmit.bind(this)}> <input type="text" ref={this.inputRef} /> <button type="submit">Submit</button> </form> ); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值