事件处理 ref使用场景 受控组件与非受控组件

最新推荐文章于 2023-08-18 15:00:40 发布
最新推荐文章于 2023-08-18 15:00:40 发布
阅读量200 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l529936997/article/details/119278405
版权
本文探讨了React中受控组件和非受控组件的区别。非受控组件利用ref直接将值存储在组件实例中，而受控组件通过更改状态将值保存在state中。官方建议避免过度使用ref，推荐使用受控组件。
摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>createRef的使用</title>
    <style>
        .title{
   
            width: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <!-- 准备一个"容器" -->
    <div id="test"></div>




    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将ajax转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></
最低0.47元/天 解锁文章
爱吃囍囍丸子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
说说你对受控组件和非受控组件的理解？应用场景？
weixin_57909742的博客
08-14 186
在受控组件中，表单元素的值由 React 组件的状态（state）管理，并通过事件监听和回调函数来更新状态。每当用户输入内容或选择选项时，都会触发相应的事件处理函数，从而更新组件的状态和表单元素的值。相比受控组件，非受控组件更加简单直接，不需要维护额外的状态和事件处理函数。而对于需要进行复杂验证和处理的表单，使用受控组件可以提供更好的控制和可维护性。受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是 React 中两种处理表单元素的方式。
说说对受控组件和非受控组件的理解？应用场景？
weixin_66557048的博客
12-30 152
如果想要解除被控制，可以为input标签设置onChange事件，输入的时候触发事件函数，在函数内部实现state的更新，从而导致input框的内容页发现改变。这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是input标签是一个可读的状态。如果选择非受控组件的话，控制能力较弱，表单数据就由DOM本身处理，但更加方便快捷，代码量少。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。非受控组件，简单来讲，就是不受我们控制的组件。
说说你对受控组件和非受控组件的理解？应用场景
weixin_70238574的博客
08-18 303
受控组件： 受控组件是指其值（如输入框的值）由 React 的状态（state）来控制并更新的组件。非受控组件： 非受控组件是指其值不受 React 状态控制的组件。在非受控组件中，表单元素的值通常由 DOM 自身维护，并通过对 DOM 进行引用来获取表单元素的值。需要注意的是，在使用非受控组件时，要确保正确地更新表单元素的值，并且在需要获取表单数据时，通过 DOM 引用来获取相应的值。同时，为了遵循 React 的单向数据流原则，不建议在组件内部直接修改非受控组件的值。
说说对React中受控组件和非受控组件的理解？应用场景？
weixin_44475093的博客
07-09 979
一、受控组件受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据举个简单的例子：classTestComponentextendsReact.Component{ ...
非受控组件
abc的博客
10-21 511
组件类型 表单数据处理方式 受控组件 React组件处理 非受控 DOM处理（使用ref） 受控组件： class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChang...
Vue 中的受控与非受控组件的实现
10-17
Vue中受控组件与非受控组件的实现是其组件设计模式的核心概念之一。理解它们之间的区别，可以帮助开发者更好地控制数据流和界面响应。 受控组件的概念源自于React框架，但在Vue中同样适用。受控组件是指那些其值由...
浅谈react受控组件与非受控组件(小结)
11-26
在React开发中，受控组件和非受控组件是两种处理表单数据的不同方式，...根据项目需求和具体场景，开发者可以灵活选择使用受控组件或非受控组件。在实际开发中，了解并掌握这两种组件的区别和使用场景是非常重要的。
controlled-component:管理React受控组件的示例
04-30
7. **使用ref获取非受控组件的值**：在需要与非受控组件交互或获取其值时，可以使用`ref`属性。`ref`提供了一个直接访问DOM节点或React组件实例的途径。 8. **uncontrolled-form库**：对于复杂的表单逻辑，可以考虑...
糯米组件化实例仓库
08-11
5. **受控组件与非受控组件**：在React中，表单元素的值可以由组件自身控制（受控组件），也可以通过ref获取（非受控组件）。理解这两者的区别和应用场景，对于优化用户体验和简化代码非常重要。 6. **高阶组件...
React Form 指南.zip
10-25
二、受控组件与非受控组件 1. 受控组件：在受控组件中，每个表单元素的值都由React组件控制。每次用户输入时，都会触发`onChange`事件，并更新对应的组件状态。这种方式确保了组件状态始终反映表单的当前值。 2. ...
react——非受控组件和非受控组件的应用
阿牛哥的博客
09-21 263
react——非受控组件和非受控组件的应用
06-react ref使用，受控与非受控组件
yunbabac的博客
11-12 477
ref基本使用 推荐使用方法二 ：传入对象 ref的类型 上面我们ref对映的都是html对象，也可以应用在自己定义的类组件上，函数组件不可以，函数组件就是一个函数，没有实例 我们拿到了类组件对象，可以调用他的方法 受控组件 受控组件一般值html的表单，react里没有vue中v-model相关指令，所以受控组件和v-model效果差不多，就是自己控制表单的提交，input输入框的值保存在state中，同步更新 import React, { PureComponen...
react-复习（4）受控组件非受控组件和ref的使用
weixin_44197562的博客
05-29 505
React的受控组件与非受控组件的概念是相对于表单而言，如果一个 input 表单元素的值是由 React 控制，就其称为受控组件。非受控组件就像是运行在 React 体系之外的表单元素，当用户将数据输入到表单字段（例如 input，dropdown 等）时，React 不需要做任何事情就可以映射更新后的信息。然而，这也意味着，你无法强制给这个表单字段设置一个特定值。 受控组件 比如我们常用利用onChange事件保存用户输入的信息，就是一个受控组件： constructor() { super.
什么是React受控组件和非受控组件
tyxjolin的专栏
03-24 2185
React是一个非常流行的JavaScript库，用于构建Web应用程序。React中有两种类型的组件，受控组件和非受控组件。在本文中，我们将深入研究这两种组件的区别，优缺点以及如何选择适当的组件类型。什么是React组件React组件是一种用于构建用户界面的代码单元。组件可以是类组件或函数组件，它们都可以接收输入并返回输出。React中的组件是可重用的，这意味着您可以在应用程序的不同部分使用相同的组件，以减少重复代码和提高应用程序的可维护性。React中的组件可以是受控组件或非受控组件。
React表单里受控组件和非受控组件
湾流~ 的博客
11-19 210
通过受控组件和非受控组件两种方式获取表单的值 受控组件 官方说明 React受控组件链接 1.声明 2.将value绑定到声明的对象中 3.绑定onChange改变触发的函数事件 import React, { Component } from 'react' export default class App extends Component { //在state中添加一个状态，作为表单元素的value值 state={ account:'', pwd:'
对受控组件和非受控组件的理解，以及应用场景？
zz130428的博客
12-15 2565
这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态。大部分时候推荐使用受控组件来实现表单，因为在受控组件中，表单数据由。因此，受控组件我们一般需要初始状态和一个状态更新事件函数。如果选择非受控组件的话，控制能力较弱，表单数据就由。事件，输入的时候触发事件函数，在函数内部实现。非受控组件，简单来讲，就是不受我们控制的组件。当用户输入新的内容时，
http://m.baidu.com/
热门推荐
iOS随笔
05-13 1万+
很多大公司都会提供一个m开头的主机，为手机服务
selenium cookie 处理以及添加
清风冷吟
02-23 1969
selenium cookie 处理 # -*- coding: utf-8 -*- """ 用于精简cookies， 添加cookie 1. selenium 获取的cookies 是列表类型 2. 将获取的cookies只保留"domain", "name", "path", "value"这4个字段 3. "path" 非必须的 4. 添加cookie是已字典的形式添加 注
React 源码漂流（四）之 createRef
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-16 3305
引言本篇从 React Refs 的使用场景、使用方式、注意事项，到 createRef 与 Hook useRef 的对比使用，最后以 React createRef ...
受控组件与非受控组件
最新发布
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
发出的红包

打赏作者

爱吃囍囍丸子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值