当前位置: 首页 > news >正文

react中如何获取真实的dom

在 React 中,获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性,用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 DOM 元素或组件实例。

1. 函数组件中的 useRef

在函数组件中,获取 DOM 元素的引用需要使用 useRef 钩子。

示例:函数组件中的 useRef 用法
import React, { useRef } from 'react';function MyComponent() {// 创建一个 ref 来引用 DOM 元素const inputRef = useRef(null);const focusInput = () => {// 通过 ref 访问真实的 DOM 元素,并给它添加焦点inputRef.current.focus();};return (<div><input ref={inputRef} type="text" /><button onClick={focusInput}>Focus the input</button></div>);
}export default MyComponent;

解释:

  • useRef 返回一个包含 .current 属性的对象,current 可以指向真实的 DOM 元素(或者组件实例,具体取决于 ref 的用途)。
  • 在这个例子中,inputRef.current 会指向 <input> 元素本身,你可以通过它访问 DOM 元素的属性和方法(例如 focus())。

2. 类组件中的 createRef

在类组件中,获取 DOM 元素的引用需要使用 React.createRef() 方法。

示例:类组件中的 createRef 用法
import React, { Component } from 'react';class MyComponent extends Component {// 在类组件中创建 refconstructor(props) {super(props);this.inputRef = React.createRef();}focusInput = () => {// 通过 ref 访问真实的 DOM 元素,并给它添加焦点this.inputRef.current.focus();};render() {return (<div><input ref={this.inputRef} type="text" /><button onClick={this.focusInput}>Focus the input</button></div>);}
}export default MyComponent;

解释:

  • React.createRef() 用于在类组件中创建一个 ref 对象,this.inputRef.current 指向 DOM 元素(在此例中是 <input> 元素)。
  • focusInput 方法通过 this.inputRef.current.focus() 调用 DOM 方法来聚焦输入框。

3. 访问 DOM 元素的常见用途

  • 获取输入框的值:你可以通过 ref 获取到输入框的值,虽然在大多数情况下,React 推荐使用受控组件来管理输入框的值,但有时直接访问 DOM 元素可能更简单。

    示例:

    function MyComponent() {const inputRef = useRef(null);const handleSubmit = () => {alert(`Input value: ${inputRef.current.value}`);};return (<div><input ref={inputRef} type="text" /><button onClick={handleSubmit}>Submit</button></div>);
    }
    
  • 控制焦点ref 可以用来控制元素的焦点(如前面的例子),让用户能够交互时快速导航到特定的输入框。

  • DOM 操作:你还可以直接操作 DOM 元素的其他属性,如添加事件监听器、获取元素尺寸、滚动等。

4. 使用 ref 获取自定义组件的实例

除了 DOM 元素,ref 还可以用来获取类组件的实例。

示例:获取类组件实例
import React, { Component } from 'react';class MyButton extends Component {clickHandler() {alert('Button clicked!');}render() {return <button onClick={this.clickHandler}>Click Me</button>;}
}class ParentComponent extends Component {constructor(props) {super(props);this.buttonRef = React.createRef();}triggerButtonClick = () => {this.buttonRef.current.clickHandler(); // 调用子组件的方法};render() {return (<div><MyButton ref={this.buttonRef} /><button onClick={this.triggerButtonClick}>Trigger Child Button Click</button></div>);}
}export default ParentComponent;

解释:

  • this.buttonRef.current 会指向子组件 MyButton 的实例,因此你可以直接调用它的方法(如 clickHandler())。
  • ref 对于类组件和函数组件的使用方式略有不同,但它们的核心思想相同:通过 ref 获取实例或 DOM 元素的引用。

5. 注意事项

  • 避免过度使用 ref:在 React 中,ref 是一种“逃逸机制”,它绕过了 React 的数据流和状态管理。尽量避免在没有必要的情况下使用 ref,推荐使用 React 的状态和 props 来管理数据和交互。
  • ref 只在渲染完成后有效ref 只能在组件渲染完成后访问到 DOM 元素。因此,在 componentDidMountuseEffect 中使用 ref 时,要确保渲染已经完成。

总结:

  • 函数组件 中,使用 useRef 来获取真实的 DOM 元素。
  • 类组件 中,使用 React.createRef() 来获取真实的 DOM 元素。
  • ref 用于访问 DOM 元素或组件实例,可以用于获取值、控制焦点或执行其他 DOM 操作。

相关文章:

react中如何获取真实的dom

在 React 中&#xff0c;获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性&#xff0c;用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 DOM 元素或组件实例。 1. 函数组件中的 useRef 在函数组件中&#xff0c;获取 DOM 元素的引用需要使用 …...

5G与物联网的协同发展:打造智能城市的未来

引言 随着科技的不断进步&#xff0c;智能城市的概念已经不再是科幻小说中的幻想&#xff0c;它正在逐步走进我们的生活。而这背后的两大驱动力无疑是 5G和 物联网&#xff08;IoT&#xff09;。5G网络以其高速率、低延迟、大容量的优势&#xff0c;与物联网的强大连接能力相结…...

【Qt】实现定期清理程序日志

在现有Qt程序中实现可配置日志保存天数的代码示例&#xff0c;分为界面修改、配置存储和核心逻辑三部分&#xff1a; // 1. 在配置文件&#xff08;如settings.h&#xff09;中添加保存天数的配置项 class Settings { public:int logRetentionDays() const {return m_settings…...

git bisect 使用二分法查找引入错误的提交

git bisect 使用二分法查找引入错误的提交 Git bisect 命令官方文档 git bisect 这个命令使用二分搜索算法来查找项目历史中哪个提交引入了一个错误 使用该命令时&#xff0c;首先告诉它一个已知包含错误的 “坏” 提交 以及一个已知在错误出现之前的 “好” 提交 然后 git b…...

一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法

论文标题 中文标题&#xff1a;一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法 英文标题&#xff1a;A Joint Routing and Time-Slot Scheduling Load Balancing Algorithm for In-Vehicle TSN 作者信息 Bo Xu, Xinrui Chang, Dongyang Xu, Shuo Wang, Uzair As…...

【弹性计算】容器、裸金属

容器、裸金属 1.容器和云原生1.1 容器服务1.2 弹性容器实例1.3 函数计算 2.裸金属2.1 弹性裸金属服务器2.2 超级计算集群 1.容器和云原生 容器技术 起源于虚拟化技术&#xff0c;Docker 和虚拟机和谐共存&#xff0c;用户也找到了适合两者的应用场景&#xff0c;二者对比如下图…...

Golang关于结构体组合赋值的问题

现在有一个结构体&#xff0c;其中一个属性组合了另外一个结构体&#xff0c;如下所示&#xff1a; type User struct {Id int64Name stringAge int64UserInfo }type UserInfo struct {Phone stringAddress string }如果要给 User 结构体的 Phone 和 Address 赋值的话&am…...

DeepSeek vs ChatGPT:AI对决中的赢家是……人类吗?

DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f; 文章目录 DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f;一、引言1. 背景2. 问题 二、DeepSeek vs ChatGPT&#xff1a;谁更胜一筹&#xff1f;2.1 语言生成能力评测对比场景…...

新建github操作

1.在github.com的主页根据提示新建一个depository。 2.配置用户名和邮箱 git config --global user.name "name" git config --global user.email "email" 3.生成ssh秘钥 ssh-keygen -t rsa 找到public key 对应的文件路径 cat /root/.ssh/id_rsa 复制显…...

Spring Boot 携手 DeepSeek:开启智能交互新时代

前言 在当今数字化浪潮汹涌澎湃的时代,人工智能技术正以前所未有的速度改变着我们的生活和工作方式。大语言模型作为人工智能领域的一颗璀璨明星,凭借其强大的自然语言处理能力,为各个行业带来了新的发展机遇。DeepSeek 作为一款性能卓越的大语言模型,以其高效、准确的文本…...

基于SSM+uniapp的数学辅导小程序+LW示例参考

1.项目介绍 系统角色&#xff1a;管理员、普通用户功能模块&#xff1a;用户管理、学习中心、知识分类管理、学习周报管理、口算练习管理、试题管理、考试管理、错题本等技术选型&#xff1a;SSM&#xff0c;Vue&#xff08;后端管理web&#xff09;&#xff0c;uniapp等测试环…...

HTML的入门

一、HTML HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是一种用来告知浏览器如何组织页面的标记语言。 超文本&#xff1a;就是超越了文本&#xff1b;HTML不仅仅可以用来显示文本(字符串、数字之类)&#xff0c;还可以显示视频、音频等…...

Windows 安装 GDAL 并配置 Rust-GDAL 开发环境-1

Rust-GDAL 是 Rust 语言的 GDAL&#xff08;Geospatial Data Abstraction Library&#xff09; 绑定库&#xff0c;用于处理地理数据。由于 GDAL 依赖较多&#xff0c;在 Windows 上的安装相对复杂&#xff0c;本文档将介绍如何安装 GDAL 并配置 Rust-GDAL 的开发环境。 1. 检…...

IntelliJ IDEA 接入 AI 编程助手(Copilot、DeepSeek、GPT-4o Mini)

IntelliJ IDEA 接入 AI 编程助手&#xff08;Copilot、DeepSeek、GPT-4o Mini&#xff09; &#x1f4ca; 引言 近年来&#xff0c;AI 编程助手已成为开发者的高效工具&#xff0c;它们可以加速代码编写、优化代码结构&#xff0c;并提供智能提示。本文介绍如何在 IntelliJ I…...

【金三银四】分享数据库笔试题及答案~~

你是否在面试中遇到过关于数据库的笔试题&#xff1f;如何高效地准备这些题目&#xff0c;提升自己的竞争力&#xff1f;本文将为你整理一些经典的数据库笔试题及其答案&#xff0c;助你备战面试。 金三银四马上来了&#xff0c;测试年限较短难免会碰到笔试题&#xff0c;最近…...

3.1 AI Agent产品管理革命:从愿景定义到用户价值交付的全链路方法论

AI Agent产品管理革命:从愿景定义到用户价值交付的全链路方法论 引言:AI时代产品经理的范式跃迁 Gartner预测,到2026年75%的AI项目失败将归因于产品管理缺失。本文揭示AI Agent产品经理的六大核心能力模型,通过GitHub Sentinel等案例,展示如何将大模型技术转化为可持续商…...

MySQL常见错误码及解决方法(1130、1461、2003、1040、2000、1049、1062、1129、2002、1690等)

目录 【问题1】、FATAL: error 1130: Unknown error 1130 【问题2】、FATAL: error: 1461 【问题3】、ERROR 2003 (HY000): Cant connect to MySQL server on "" (113) 【问题4】、FATAL: error 2003: Cant connect to MySQL server on 172.19.111.151 (111) 【问…...

Rhel Centos环境开关机自动脚本

Rhel Centos环境开关机自动脚本 1. 业务需求2. 解决方法2.1 rc.local2.2 rc.d2.3 systemd2.4 systemd附着的方法2.5 tuned 3. 测试 1. 业务需求 一台较老的服务器上面业务比较简单,提供一个简单的网站,但已经没有业务的运维人员. 想达到的效果: 由于是非标准的apache或者nginx…...

2D 游戏艺术、动画和光照

原文&#xff1a;https://unity.com/resources/2d-game-art-animation-lighting-for-artists-ebook 笔记 用Tilemap瓷砖大小为1单元&#xff0c;人物大小在0.5~2单元 PPU &#xff1a;单位像素 pixels per unit 2160 4K分辨率/ 正交相机size*2 完整屏幕显示像素点 有骨骼动…...

基于SSM+uniapp的鲜花销售小程序+LW示例参考

1.项目介绍 系统角色&#xff1a;管理员、商户功能模块&#xff1a;用户管理、商户管理、鲜花分类管理、鲜花管理、订单管理、收藏管理、购物车、充值、下单等技术选型&#xff1a;SSM&#xff0c;Vue&#xff08;后端管理web&#xff09;&#xff0c;uniapp等测试环境&#x…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...