学习记录——react受控组件和非受控组件，操作dom（ React.createRef()）

最新推荐文章于 2024-01-24 10:57:45 发布
最新推荐文章于 2024-01-24 10:57:45 发布
阅读量275 收藏
点赞数
分类专栏： react 文章标签： react js javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sakura_zr/article/details/108465639
版权

受控组件和非受控组件


受控组件：主要应用于表单元素。受控值得是表单中的值，和状态绑定
有受控组件，也有非受控组件。非受控的意思是表单的值不与状态绑定

受控组件
通过受控方式取值，可以实时的去拿，就像vue里的v-model，可以动态获取值。前提是，input框里的值要绑定到state里去。
在这里插入图片描述
打开页面查看：
在这里插入图片描述

非受控
在react中，我们可以通过ref来获取dom元素
用法：在需要获取的dom元素标签中使用ref=’xxx’
使用this.refs.xxx就可以获取到这个dom元素了
在这里插入图片描述
打开浏览器查看：如果有报错先不要管
在这里插入图片描述
当点击button的时候，控制台会输出绑定了ref的dom元素
而如果想要得到input里的值，直接.value即可
在这里插入图片描述
在这里插入图片描述
这就是 非受控：值不受状态影响，也就是状态不能实时获取它的值。

关于报错
在这里插入图片描述
Warning: A string ref, “ipt”, has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() inst

最低0.47元/天 解锁文章
　　　SakuraZr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
24 React.createRef()用法细节分析
Stephy_Yy
10-12 1950
通过React.createRef → ref对象 通过元素的ref属性可以附加到React元素上 一般通过构造器中给this的属性赋值一个ref，方便整个组件使用 ref只要传递到react元素中，就可以利用ref的current属性访问到该真实DOM节点 ref在componentDidMount和componentDidUpdate触发前更新 current里是null的现象 由于打印时，this.modalRef才刚刚声明，current是null，但是current是个引用值，展开时访问的是.
React中Ref使用详解（createRef、回调ref、useRef、forwardRef、useImperativeHandle）
AIWWY的博客
03-10 8593
目录 类组件中使用 ref='myRef'(React中不推荐） createRef（推荐） 回调Ref （推荐） 函数组件中使用 React.useRef React.forwardRef React.useImperativeHandle 由于函数组件中没有实例，所以区分2种用法。 类组件中使用 注意你不能在函数组件上使用下面的ref属性，因为他们没有实例。 ref='myRef'(React中不推荐） 和vue中的ref方法使用相同，在元素上添加ref=‘myRef’，.
React学习笔记（三）：引用（Refs）& DOM
一个大神的发展史
05-17 7112
概述：    引用提供了一个获得DOM节点或者创建在render方法中的React元素的方法；    在典型的React数据流中，props是唯一的父组件与它们的子元素的通信方式。更改子元素，你需要使用新的props去重新渲染子元素。但是在一些情况下你现在典型数据流之外强制的更改元素。被更改的子元素可能是一个React组件的实例，或者是一个DOM元素。对所有这些情况，React提供了一种特殊方法：...
useRef和createRef
weixin_43636454的博客
03-02 1704
在react中，我们可以使用ref来获取组件示例或者DOM元素。 一般使用方法： const ref = useRef(initialValue); <input ref={ref} /> 注意： useRef返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )； 返回的 ref 对象在组件的整个生命周期内保持不变，除非手动修改； 当更新 current 值时并不会 re-render ，这是与 useState 不同的地方；
【react】createRef
bbt953的博客
03-13 392
createRef
react-react面试题之构建组件的方式.zip
最新发布
03-20
- **类组件（Class Component）**：基于ES6类的组件，需要继承React.Component。类组件可以有自己的状态（state）和生命周期方法，例如： ```jsx class MyComponent extends React.Component { render() { ...
React组件化开发初试共20页.pdf.zip
10-30
类组件则通过继承React.Component，提供了状态和生命周期方法，使得处理复杂逻辑和更新更灵活。 1. **函数组件**： 函数组件没有自己的状态，只负责渲染视图。例如： ```jsx function Welcome(props) { return ...
controlled-component:管理React受控组件的示例
04-30
React受控组件的概念源于这样一个原则：组件的值（例如输入字段的值）由React组件本身完全控制，而不是由DOM元素独立管理。这使得在React应用中管理和更新用户输入数据变得简单且可预测。 在受控组件中，每当用户在...
Vue 中的受控与非受控组件的实现
01-19
受控组件 什么是受控组件？ 其值由React控制的输入表单元素...表单数据由 DOM 处理的组件非受控组件。 非受控组件有两个特点：1. 不设置value值，2. 通过ref获取dom节点然后再取value值 <input type=text placeh
react组件基本用法示例小结
10-15
inputRef = React.createRef(); handleClick = () => { console.log(this.inputRef.current.value); }; render() { return ( <input type="text" ref={this.inputRef} /> <button onClick={this....
【React】 类组件中 Ref 的使用（createRef）
qq_45677671的博客
04-22 1541
文章目录基本使用父子传值 基本使用 React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例,ref可以挂载到组件上也可以是dom元素上。 挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例 挂载到dom元素上时表示具体的dom元素节点 import React, { PureComponent } from 'react' class Child extends Pure
什么是React受控组件和非受控组件
tyxjolin的专栏
03-24 2124
React是一个非常流行的JavaScript库，用于构建Web应用程序。React中有两种类型的组件，受控组件和非受控组件。在本文中，我们将深入研究这两种组件的区别，优缺点以及如何选择适当的组件类型。什么是React组件React组件是一种用于构建用户界面的代码单元。组件可以是类组件或函数组件，它们都可以接收输入并返回输出。React中的组件是可重用的，这意味着您可以在应用程序的不同部分使用相同的组件，以减少重复代码和提高应用程序的可维护性。React中的组件可以是受控组件或非受控组件。
react中的受控组件与不受控组件
m0_60150712的博客
07-27 2061
React是一个流行的构建用户界面的JavaScript库，用于构建Web应用程序。React中有两种类型的组件，受控组件和非受控组件。在本文中，我们将深入研究这两种组件的区别，优缺点以及如何选择适当的组件类型。
在React中使用React.createRef：更优雅的DOM引用方式
JudithHuang的博客
01-24 974
在React中使用React.createRef：更优雅的DOM引用方式 React提供了多种方式来引用DOM元素，其中React.createRef()是一种更为现代、更优雅的方式。
React之字符串形式的ref
wanggang182007的博客
04-18 364
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>1_字符串形式的ref</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> ...
React16源码: createRef与forwardRef源码实现
Wang的专栏
12-31 1141
拿一个场景举例开始比如，在react当中写一个组件，类型是 class Component在 render function 里面渲染一系列的子组件或者 dom节点会有这样的需求，就是获取某个dom节点或某个子组件的实例来做一些手动的操作不局限于 props 更新这种方式来更新这个节点，获取节点后，可以绑定某些事件做一些操作如果没有其他好方法，可能要自己去写之类的选择器来获取这个 dom 节点在 react 当中就为我们提供了这种方式。
react之useRef和createRef
大龙帅的博客
05-15 3756
一、useRef和createRef 1. 作用于普通DOM import { Input, Button } from 'antd'; import { useRef, createRef } from 'react'; import type { InputRef } from 'antd'; const RefDemo = () => { const inputEL = useRef<InputRef>(null); const inputEL2 = useRef&lt
React createRef循环动态赋值ref
weixin_47292253的博客
11-12 3949
handleChange = (key) => { this[`input${key}Ref`] = React.createRef(); } handleSave = () => { const { list } = this.state; for (let item of list) { if (item.value && item.value.length > 100) { Toast.show(`${i.
react中受控组件和非受控组件
06-08
React中的组件可以分为两种类型：受控组件和非受控组件。 受控组件是指表单元素的值由React控制的组件，例如input、textarea和select等元素。这些组件的值通常由父组件通过props传递并在回调函数中更新，每当用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值