React 组件三大核心之 ref

文章目录

  • 用法
    • React.createRef()
    • useRef Hook
  • 注意

ref 是 React 中的一个重要概念,它用于访问和操作 DOM 元素或者类组件实例。

在React中,ref 提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素。这对于执行DOM操作、读取值、动画、集成第三方DOM库等场景非常有用。

ref 是一种特殊的属性,你可以将它附加到React元素上。当元素被挂载到DOM或卸载时,React会将ref对象上的特定方法作为回调传递给它。这使得可以在生命周期方法或其他React组件的方法中直接访问DOM元素。

  • 直接访问DOM:通过ref,你可以直接访问和操作DOM元素。
  • 访问组件实例:对于类组件,ref也可以用来访问组件的实例。
  • 灵活性:ref可以附加到任何React元素上,包括类组件、函数组件、DOM元素等。

用法

React.createRef()

React提供了 React.createRef() 方法来创建ref,你可以通过函数的形式来访问DOM元素。

class MyComponent extends React.Component {constructor(props) {super(props);this.myInput = React.createRef();}focusInput = () => {this.myInput.current.focus(); // 使input获得焦点console.log(this.myInput.current.value); // 获取input值};render() {return (<div><input ref={this.myInput} type="text" /><button onClick={this.focusInput}>Focus Input</button></div>);}
}

useRef Hook

在函数组件中,还可以使用 useRef Hook 来创建ref。

import React, { useRef } from 'react';const MyComponent = () => {const myInput = useRef(null);const focusInput = () => {myInput.current.focus(); // 使input获得焦点console.log(myInput.current.value); // 获取input值};return (<div><input ref={myInput} type="text" /><button onClick={focusInput}>Focus Input</button></div>);
};export default MyComponent;

注意

  • 尽量避免过度使用ref,React的设计哲学是尽可能地避免直接操作DOM。

  • 当ref被附加到一个元素上时,React会在组件挂载时将该元素作为current属性传递给ref。同样地,当元素被卸载时,current值将被设为null。

  • 不要在render方法或任何应该具有纯函数性质的地方使用ref,因为这可能会导致意外的副作用。

  • 对于函数组件,使用React.forwardRef或useRef来创建和使用ref。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13842.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Servlet的request对象

request对象的继承关系 1.HttpServletRequest接口继承了ServletRequest接口&#xff0c;对其父接口进行了扩展&#xff0c;可以处理满足所有http协议的请求 2.HttpServletRequest和ServletRequest都是接口&#xff0c;不能创建对象&#xff0c;因此在tomcat底层定义实现类并创…

modbus开源库libmodbus的C语言使用记录(实现简单的modbus主机/丛机程序,解决libmodbus库安装出现的问题)

libmodbus简介 libmodbus 是一个开源的、跨平台的C库,用于实现Modbus通讯协议。它支持Modbus RTU(RS-232/485)和Modbus TCP协议,可以使开发者方便地在项目中集成Modbus通讯功能。libmodbus的设计目标是简单、灵活和高效,适用于各种大小的嵌入式和桌面应用。 编译运行测试…

filter is not a function

"filter is not a function" 这个错误通常意味着你尝试在一个不支持 .filter() 方法的对象上调用这个方法。在JavaScript中&#xff0c;.filter() 是一个数组&#xff08;Array&#xff09;的内置方法&#xff0c;用于创建一个新数组&#xff0c;其包含通过所提供函数…

ffpmeg windows WSl 编译so

1.NDK 环境变量配置 2.git clone ffpmeg 3.创建脚本&#xff08;需先下载gcc编译器&#xff09; 64位脚本如下 #!/bin/bashexport NDK/home/test/ndk20 #这里配置先你的 NDK 路径 TOOLCHAIN$NDK/toolchains/llvm/prebuilt/linux-x86_64function build_android {./configure \ …

鸿蒙ArkUI-X跨平台技术:【SDK结构介绍】

ArkUI-X SDK目录结构介绍 简介 本文档配套ArkUI-X&#xff0c;将OpenHarmony ArkUI开发框架扩展到不同的OS平台&#xff0c;比如Android和iOS平台&#xff0c;让开发者基于ArkUI&#xff0c;可复用大部分的应用代码&#xff08;UI以及主要应用逻辑&#xff09;并可以部署到相…

Linux 磁盘管理命令 mdadm:RAID设置工具

文章目录 3.Linux 磁盘管理命令3.25 mdadm:RAID设置工具案例练习 3.Linux 磁盘管理命令 3.25 mdadm:RAID设置工具 作用&#xff1a;mdadm 是 Linux 下用于管理软件磁盘阵列的工具。 用法&#xff1a;mdadm [模式] [设备] [选项] 模式有如下 7 种: Create&#xff1a;使用空闲…

05-Vue路由

05-Vue路由 前言vue路由介绍配置路由信息vue实例使用vue路由router-link <router-link> Propstoreplaceappendtagactive-classexacteventexact-active-classaria-current-valuerouter-view <router-view> Propsname 前言 我们接着上一篇文章 04-Vue&#xff1a;ref…

RedHat9 | 配置转发DNS服务器

一、实验环境 1、介绍 转发服务器&#xff08;Forwarding Server&#xff09;接收查询请求&#xff0c;但不直接提供DNS解析&#xff0c;而是将所有查询请求发送到另外的DNS服务器&#xff0c;将查询的结果返回后保存到缓存中。如果没有指定转发服务器&#xff0c;DNS服务器会…

【Unity Shader入门精要 第8章】透明效果(二)

1. 透明度测试 透明度测试的原理是将片元的 Alpha 值与某个指定的阈值进行比较&#xff0c;当 Alpha 超过阈值时&#xff0c;该片元正常显示&#xff0c;若 Alpha 值低于指定的阈值&#xff0c;则将该片元丢弃。准确来讲&#xff0c;透明度测试并不是为了渲染一种半透的效果&a…

9 html综合案例-注册界面

9 综合案例-注册界面 一个只有html骨架的注册页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…

1255: 石子合并

时间限制: 1 Sec 内存限制: 128 MB 提交: 1456 解决: 779 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 现在有n堆石子&#xff0c;你每次可以挑任意两堆将其合并成一堆&#xff0c;代价是两堆石子的数量和。可知经过n-1次合并后只剩下一堆石子&#xff0c;现在要求总…

LabVIEW机器视觉怎样在智能制造中实现高精度质量控制?

在智能制造中&#xff0c;LabVIEW&#xff08;Laboratory Virtual Instrument Engineering Workbench&#xff09;机器视觉系统能够通过以下方式实现高精度质量控制&#xff1a; 1. 图像采集与预处理 LabVIEW利用高分辨率相机和图像传感器来采集产品图像。通过使用LabVIEW的图…

stable diffusion webui prompt generator and translator

主要关注一些stable diffusion中的prompt的翻译器,prompt有很多优化的算法,本身prompt优化也是比较好的方向,这块主要有类似beautifulprompt之类算法,包括fooocus中内置了一个基于GPT2的语言模型来提供更好的prompt,这类的插件在git上有很多,对于目前的很多线上的图片生成…

PostgreSQL如何监控备库延迟

方案1&#xff1a; 主库查询 SELECT * FROM pg_stat_replication; NOTE1&#xff1a;PostgreSQL 10及以后版本 pg_stat_replication视图增加了write_lag&#xff0c;flush_lag&#xff0c;replay_lag。分别表示从库wal日志写入(写入到操作系统缓存)延迟&#xff0c;从库wal日…

头歌03-最优二叉查找树

""" 题目:给定n个互异的关键字组成的序列K=<k1,k2,...,kn>,且关键字有序(k1<k2<...<kn),从这些关键字中构造一棵二叉查找树。对每个关键字ki,每次搜索到的概率为pi。还有n+1个“虚拟键”d0,d1,...,dn,他们代表不在K的值。d0代表所有小于k…

IS-IS基本配置 IS-IS邻接关系

一.IS-IS基本配置 原理概述 和 OSPF 路由协议一样&#xff0c; IS-IS 也是一个应用非常广泛的 IGP 路由协议&#xff0c;很多 ISP 网络、特别是大型的ISP网络都部署了IS-IS网络协议。 RIP 、 OSPF 等许多 IGP 都是针对 IP ( Internet Protocol &#xff09;这个网络层协议而开…

php种调用jodConverter+ openoffic实现word转pdf

安装java环境 jdk文件 jdk-8u221-linux-x64.tar.gz将压缩包移到指定目录 sudo mv jdk-8u221-linux-x64.tar.gz /usr/local/ #解压 cd /usr/local sudo tar -zxvf /usr/local/jdk-8u221-linux-x64.tar.gz 配置java环境变量 sudo vim /etc/profile#在文件的最后添加如下内容…

二、信号连接槽函数

需求&#xff1a;点击Button按钮&#xff08;下班&#xff09;&#xff0c;label显示淦饭 信号发出者&#xff1a;Button 发送的信号&#xff08;signals&#xff09;&#xff1a;被点击 信号接收者&#xff1a;label 信号的处理&#xff08;slots&#xff09;&#xff1a;显示…

0基础安装 composer

解决&#xff1a; composer 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 php composer.phar可以运行 安装环境&#xff1a;系统w11 官网地址&#xff1a;Composer 1.安装composer 1.1打开命令行窗口 在命令行窗口里&#xff0c;右键是粘贴&#xff0…

精准安全运维,统信UOS服务器版V20(1070)漏洞修复指南丨年度更新

随着信息安全威胁的不断升级&#xff0c;操作系统的安全性已成为企业运维的关键要素。 为了确保业务运行环境的安全无忧&#xff0c;统信软件持续致力于技术创新和优化&#xff0c;并于日前重磅推出了统信UOS服务器版V20&#xff08;1070&#xff09;。该系统提供了高频补丁更…