React通过useRef获取对应的Dom/组件实例

最新推荐文章于 2024-05-16 15:39:47 发布
最新推荐文章于 2024-05-16 15:39:47 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前端 React Ref 文章标签： react ants
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luotouzi/article/details/119207597
版权
前端 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
React
7 篇文章 0 订阅
订阅专栏
Ref
1 篇文章 0 订阅
订阅专栏

步骤：

1. 声明一个ref对象

const formRef = useRef(false)

2. 绑定对应的表单元素

在这里插入图片描述

3. 通过formRef.current.validateFields().then(datas => {datas.name})获取
在这里插入图片描述

luotouzi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React中ref、forwardRef、useRef的简单用法与区别
weixin_44203945的博客
04-21 1983
react实现父组件直接执行子组件的方法（useRef）
baidu_41601048的博客
04-13 3765
今天遇到这样一个需求： 一个很简单的左右布局。要实现点击左侧数据更新右侧表格。这个表格因为在多处用到，所以被单独封装。表格勾选和全选的逻辑写在了表格这个组件内部。而这也导致了一个问题：每次点击左侧的数据，右侧的表格并没有重置状态。那如何解决这个问题？ 表格的全选和勾选与全选的状态关联是根据selectRowKeys来控制的。如果selectRowKeys=[]，那表格每行的勾选状态将被清空。所以关键就是要在每次点击左侧树形菜单的时候进selectRowKeys的操作。 第一种方法：既然表格的状态被
antd form方法
zhangyubababa的博客
07-13 1850
Antd@3.x和Antd@4.x有些地方区别还是挺大的。 Form表单的一个常规写法： 1.通过 Form.useForm 对表单数据域进行交互。 const [form] = Form.useForm(); //这里用form要使用在钩子函数里，可以配合react的hook使用， 如果使用react生命周期开发的话可以给form表单添加ref来获取表单数据或者修改数据，（this.formRef = React.createRef();） 获取表单数据：this.formRef.current.g
react18【系列实用教程】useRef —— 创建 ref 对象，获取 DOM （2024最新版）
最新发布
朝阳39的博客
05-16 438
创建了一个 current 属性值为 0 的 ref 对象。
React Hooks之useRef详解
RayShyy的博客
02-18 5467
useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
React------useRef操作DOM
grow_的博客
10-24 1700
react ----useRef使用
useRef实例
weixin_45799289的博客
04-03 195
通常用于管理React组件中需要持久化的状态，并且不希望每次渲染都被重置。例如，记录组件之间共享的信息、保存定时器ID、缓存计算结果等。属性时，不会导致组件进行更新。如果需要在改变状态后重新渲染组件，则应该使用。属性，可以用于存储任何可变的值。表示当前输入框的DOM元素，通过调用其。等，可以方便地操作引用对象的值和类型。会返回一个可变的引用对象，它包含一个。并不会触发组件重新渲染，因此在修改其。然后在按钮的点击事件中，调用。还提供了一些其他API，如。来创建一个输入框的引用。方法来将输入框聚焦。
react.js 获取真实的DOM节点实例(必看)
11-26
当组件渲染完成后，React会为`ref`指定的名称创建一个引用，并将其值设置为对应的DOM节点或React组件实例。对于原生DOM元素，`ref`的值会是该元素的真实DOM节点。 以下是一个简单的例子，展示了如何使用`ref`获取...
React如何将组件渲染到指定DOM节点详解
08-29
React 如何将组件渲染到指定 DOM 节点详解 React 框架是一个基于组件的框架，它提供了一种简单的方式来构建用户界面。但是，在某些情况下，我们需要将组件渲染到指定的 DOM 节点中，而不是默认的根节点。这篇文章将...
react-useRef:使用React Hook UseRef搜索值的React应用
04-17
在终端中，通过键入npm install 。 然后输入npm install --save axios来npm install --save axios 。 并键入npm start以启动程序。贡献拉请求是受欢迎的。 对于重大更改，请先打开一个问题以讨论您要更改的内容。 ...
react-使用自定义元素将React组件挂载到DOM
08-14
在实际项目中，这样的实现方式可以让我们在不改变现有DOM结构的情况下，将React组件嵌入到任何自定义元素中，极大地提高了代码的灵活性和可复用性。同时，自定义元素的特性也可以帮助我们在React应用中实现更好的...
useRef的基本用法
热门推荐
hx_programmer的博客
11-12 1万+
1.使用useRef获取DOM元素 const refContainer = useRef(null); console.log(refContainer) 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。 可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下: import React, { useRef } from 'react' import reactDom from 'react-dom' export .
React之useRef的使用
weixin_44530344的博客
09-09 3306
我们在使用React开发中可能会操作DOM对象或者需要保存某个值，这个时候我们可以使用useRef。
React,Hooks中useRef的使用
weixin_45389051的博客
07-30 4519
如果父组件想要调用子组件或者子组件里面的方法和数据的话，有时候就会用到useRef 不过useRef有一个很大的特点就是 useRef返回一个ref对象,返回的ref对象在组件的整个生命周期保持不变 什么意思呢？用一个案例来解释 import React, { useRef, useState, useEffect } from 'react' export default function UseRefDom2() { const [count,setCount] = useState(0)
React学习笔记（九）refs 获取DOM节点/自定义组件的实例
zem
10-04 3000
React和Vue一样，不建议操作DOM，但是如果我们在某个场景必须操作DOM，那么也可以使用refs来实现。 refs的基本使用 refs的创建 refs是通过React.createRef()来创建的，通过使用ref属性来对应某个元素。一般在constructor中赋值给某个实例属性来达到多次复用的作用 class App extends React.Component{ rende...
React 18：Ref（获取DOM对象）
七七的博客
12-20 3859
React中所有的操作默认都是在React元素上进行，然后再通过虚拟DOM应用到真实页面上的。这样做的好处我们不在赘述。虽然如此，在React中依然为我们提供了可以直接访问原生DOM对象的方式。ref就是干这个事的。ref是reference的简写，换句话说就是用来获取真实DOM对象的引用。虽然可以获取到DOM对象，但是轻易不要这么做，如果必须要获取，也尽量是读取而不要修改，如果必需要修改也要尽量减少修改的次数，总之能不用就不用。
react-----dom对象和useref()
qq_52563729的博客
10-12 439
1
react 16.8 新特性总结(二)掌握useref和ref
weixin_43844392的博客
06-05 2327
在react 中主要时操作数据进行操作，但是会有许多情况下我们还是需要获取dom,所以我们会用到ref ref ref的作用 Ref属性用来获取DOM 元素的节点和获取子组件的实例 我们先来看在class 组件中的ref refs时使用React.create(）创建的，并通过ref属性附加到React 元素中，在构建组件时，通常将Refs 分配给属性实例，以便在整个组件中华引用它们 当ref被传递给render中的元素时，改节点可以在ref的current属性中被访问 React 会在组件挂载时给cur
react父组件如何获取子组件实例
08-11
在 React 中，父组件获取子组件实例有几种常见的方法： 1. 使用 Refs：在父组件中，可以通过使用 `ref` 属性为子组件创建一个 ref，并将其附加到子组件实例上。然后可以通过 `ref.current` 来访问子组件实例。例如： ```jsx class ParentComponent extends React.Component { constructor(props) { super(props); this.childRef = React.createRef(); } componentDidMount() { console.log(this.childRef.current); // 访问子组件实例 } render() { return <ChildComponent ref={this.childRef} />; } } class ChildComponent extends React.Component { render() { return <div>Hello, World!</div>; } } ``` 2. 使用回调函数：在子组件中定义一个接受子组件实例作为参数的回调函数，并通过属性传递给子组件。子组件在合适的时机调用该回调函数，将自身实例作为参数传递给父组件。例如： ```jsx class ParentComponent extends React.Component { handleChildRef = (childRef) => { console.log(childRef); // 访问子组件实例 }; render() { return <ChildComponent onRef={this.handleChildRef} />; } } class ChildComponent extends React.Component { componentDidMount() { this.props.onRef(this); // 将子组件实例传递给父组件 } render() { return <div>Hello, World!</div>; } } ``` 这两种方法都可以让父组件获取子组件实例。在选择使用哪种方法时，可以根据具体的场景和需求来决定。一般来说，使用 Refs 是最常用的方式，但如果需要在子组件挂载后立即获取实例，则使用回调函数的方式更适合。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值