react Ref 的基本使用

类组件中使用ref

在类组件中,你可以使用createRef来创建一个ref,并将它附加到DOM元素或类组件实例上。使用ref允许你在类组件中访问和操作特定的DOM元素或类组件实例。

下面是在类组件中使用ref的步骤:

  1. 引入ReactcreateRef
    在类组件文件的顶部,你需要从React中导入ReactcreateRef
import React, { Component, createRef } from 'react';
  1. 创建ref:
    使用createRef来创建一个ref对象。
class MyClassComponent extends Component {constructor(props) {super(props);this.myRef = createRef();}// ...
}

在上面的例子中,我们在类组件MyClassComponent的构造函数中创建了一个ref(myRef)。

  1. 绑定ref到DOM元素或类组件实例:
    将创建的ref(myRef)绑定到你想要引用的DOM元素或类组件实例上。在类组件中,你可以使用ref属性来实现这一点。
class MyClassComponent extends Component {constructor(props) {super(props);this.myRef = createRef();}render() {return <input ref={this.myRef} />;}
}

在上面的例子中,我们将ref(myRef)绑定到了一个input元素上。

  1. 在类组件中使用ref:
    现在,你可以在类组件的其他方法中通过this.myRef.current来访问和操作引用的DOM元素或类组件实例。
class MyClassComponent extends Component {constructor(props) {super(props);this.myRef = createRef();}handleButtonClick = () => {if (this.myRef.current) {this.myRef.current.focus();}};render() {return (<div><input ref={this.myRef} /><button onClick={this.handleButtonClick}>Focus Input</button></div>);}
}

在上面的例子中,我们创建了一个按钮点击事件handleButtonClick,当按钮被点击时,会调用this.myRef.current.focus()来将焦点设置到input元素上。

通过这种方式,你可以在类组件中使用ref来引用和操作特定的DOM元素或类组件实例。

hooks组件中使用ref

在 React Hooks 组件中,你可以使用useRef来创建并使用 ref。useRef是一个 Hooks 函数,它允许你在函数组件中保持可变的数据,类似于在类组件中使用实例属性。ref 在许多情况下很有用,例如访问 DOM 元素、存储任意值等。

使用useRef的步骤如下:

  1. 引入useRef
    在组件文件中,首先需要从 React 中导入useRef
import React, { useRef } from 'react';
  1. 创建 ref:
    使用useRef来创建一个 ref 对象:
const myRef = useRef(initialValue);

其中,initialValue是 ref 的初始值。

  1. 将 ref 绑定到 DOM 元素:
    myRef绑定到你想要引用的 DOM 元素上。这通常通过在 JSX 中的ref属性中传递myRef来实现:
<input ref={myRef} />
  1. 在组件中使用 ref:
    你可以在组件中通过myRef.current来访问 ref 的当前值。这是一个可变的对象,可以用于存储和读取任何数据。
const MyComponent = () => {const inputRef = useRef(null);const handleButtonClick = () => {if (inputRef.current) {inputRef.current.focus();}};return (<div><input ref={inputRef} /><button onClick={handleButtonClick}>Focus Input</button></div>);
};

在上面的例子中,我们创建了一个 input 元素的 ref,并在按钮点击事件中使用inputRef.current.focus()来将焦点设置到 input 元素上。

需要注意的是,useRef返回的myRef.current属性在组件的整个生命周期中保持不变,但是其内部的值可以在不重新渲染组件的情况下发生变化。这使得useRef适用于存储在组件渲染期间需要跨渲染保持不变的数据。

自定义组件ref

当你在React中创建自定义组件时,如果想在父组件中使用ref引用子组件,你需要使用forwardRef方法。forwardRef允许你将ref从父组件传递到子组件中。

下面是使用forwardRef的步骤:

  1. 在子组件中使用forwardRef方法:
    在子组件中使用forwardRef方法来传递ref,并将它与子组件的DOM元素或其他需要引用的元素绑定起来。同时,确保在组件定义中的第二个参数(通常称为ref)中接收传递的ref。
import React, { forwardRef } from 'react';const CustomChildComponent = forwardRef((props, ref) => {return <input ref={ref} />;
});

在上面的例子中,我们创建了一个名为CustomChildComponent的自定义子组件,并在其中使用forwardRef来传递ref参数,并将它绑定到了input元素上。

  1. 在父组件中使用ref:
    现在,你可以在父组件中使用CustomChildComponent并将一个ref传递给它。这样,父组件就可以引用子组件内部的input元素。
import React, { useRef } from 'react';
import CustomChildComponent from './CustomChildComponent';const ParentComponent = () => {const inputRef = useRef(null);const handleButtonClick = () => {if (inputRef.current) {inputRef.current.focus();}};return (<div><CustomChildComponent ref={inputRef} /><button onClick={handleButtonClick}>Focus Input</button></div>);
};

在上面的例子中,我们在父组件中创建了一个ref(inputRef),并将它传递给CustomChildComponent作为ref属性。现在,我们可以在handleButtonClick函数中使用inputRef.current.focus()来将焦点设置到子组件中的input元素上。

通过这样的方法,你就可以在自定义组件中使用ref,并从父组件中控制子组件内部的DOM元素或组件实例。

自定义Hooks组件想向外暴露一些方法

如果你希望自定义组件使用ref时向外暴露一些方法,可以通过在子组件内部创建一个ref,并将它与需要暴露的方法关联。然后,将这个ref作为一个对象,包含暴露的方法,传递给父组件。这样,父组件就可以通过ref调用子组件暴露的方法。

下面是一个示例:

  1. 子组件中创建ref和暴露方法:
import React, { forwardRef, useRef, useImperativeHandle } from 'react';const CustomChildComponent = forwardRef((props, ref) => {const inputRef = useRef(null);// 暴露给父组件的方法const focusInput = () => {if (inputRef.current) {inputRef.current.focus();}};// 使用 useImperativeHandle 将方法暴露给父组件useImperativeHandle(ref, () => ({focusInput: focusInput}));return <input ref={inputRef} />;
});

在上面的例子中,我们创建了一个ref(inputRef)来引用input元素,并定义了一个focusInput方法用于将焦点设置到input元素上。然后,我们使用useImperativeHandlefocusInput方法暴露给父组件。

  1. 在父组件中使用子组件的暴露方法:
import React, { useRef } from 'react';
import CustomChildComponent from './CustomChildComponent';const ParentComponent = () => {const childComponentRef = useRef(null);const handleButtonClick = () => {if (childComponentRef.current) {childComponentRef.current.focusInput();}};return (<div><CustomChildComponent ref={childComponentRef} /><button onClick={handleButtonClick}>Focus Input</button></div>);
};

在上面的例子中,我们在父组件中创建了一个ref(childComponentRef),并将其传递给CustomChildComponent。在父组件中的handleButtonClick函数中,我们可以通过childComponentRef.current.focusInput()调用子组件中暴露的focusInput方法,将焦点设置到子组件的input元素上。

通过这种方式,你可以在自定义组件中使用ref,并将一些方法暴露给父组件,使父组件可以调用子组件的特定功能。

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

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

相关文章

浅析 C 语言的共用体、枚举和位域

前言 最近在尝试阅读一些系统库的源码&#xff0c;但是其中存在很多让我感到既熟悉又陌生的语法。经过资料查阅&#xff0c;发现是 C 语言中的共用体和位域。于是&#xff0c;趁着课本还没有扔掉&#xff0c;将一些相关的知识点记录在本文。 文章目录 前言共用体 (union)枚举…

Tomcat 的内存配置

修改 Tomcat 的内存配置&#xff0c;你需要调整 Tomcat 的 Java 虚拟机&#xff08;JVM&#xff09;参数。具体来说&#xff0c;你需要修改 catalina.sh&#xff08;Linux/macOS&#xff09;或 catalina.bat&#xff08;Windows&#xff09;脚本中的 JAVA_OPTS 变量。以下是一般…

【LeetCode 算法】Merge Two Sorted Lists 合并两个有序链表

文章目录 Merge Two Sorted Lists 合并两个有序链表问题描述&#xff1a;分析代码迭代递归 Tag Merge Two Sorted Lists 合并两个有序链表 问题描述&#xff1a; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 两个链表的…

GNN code Tips

1. 重置label取值范围 problem: otherwise occurs IndexError: target out of bounds # reset labels value range, otherwise occurs IndexError: target out of bounds uni_set torch.unique(labels) to_set torch.tensor(list(range(len(uni_set)))) labels_reset label…

网络开发-IO模型

基本概念 I/O即数据的读取&#xff08;接收&#xff09;或写入&#xff08;发送&#xff09;操作 通常用户进程中的一个完整I/O分为两个阶段 用户进程空间<-->内核空间内核空间<-->设备空间&#xff08;磁盘、网卡等&#xff09; I/O分为内存I/O、网络I/O和磁盘…

【编程】典型题目:寻找数组第K大数(四种方法对比)

【编程】典型题目&#xff1a;寻找数组第K大数&#xff08;四种方法对比&#xff09; 文章目录 【编程】典型题目&#xff1a;寻找数组第K大数&#xff08;四种方法对比&#xff09;1. 题目2. 题解2.1 方法一&#xff1a;全局排序&#xff08;粗暴&#xff09;2.2 方法二&#…

2023年第二届网络安全国际会议(CSW 2023)

会议简介 Brief Introduction 2023年第二届网络安全国际会议(CSW 2023) 会议时间&#xff1a;2023年10月13日-15日 召开地点&#xff1a;中国杭州 大会官网&#xff1a;www.cybersecurityworkshop.org 2023年第二届网络安全国际会议(CSW 2023)由杭州电子科技大学&#xff0c;国…

123.买卖股票的最佳时机3

目录 一、题目 二、分析代码 一、题目 123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09; 二、分析代码 class Solution { public:int maxProfit(vector<int>& prices) {//0表示没有操作//1表示第1次买入&#xff0c;2表示第1次卖出//3表示第2…

用html+javascript打造公文一键排版系统11:改进单一附件说明排版

一、用htmljavascript打造公文一键排版系统10中的一个bug 在 用htmljavascript打造公文一键排版系统10&#xff1a;单一附件说明排版 中&#xff0c;我们对附件说明的排版函数是&#xff1a; function setAtttDescFmt(p) {var t p;var a ;if (-1 ! t.indexOf(:))//是半角冒…

学习源码,模仿编程

一.观察者模式: 1.创建事件 2.发布事件 3.监听事件 4.效果: 二.模板方法模式

FTP使用教程

FTP使用教程 目录 一&#xff0e;FTP简介二&#xff0e;FTP搭建三&#xff0e;FTP使用 一&#xff0e;FTP简介 FTP中文为文件传输协议&#xff0c;简称为文传协议。它也是一个应用程序&#xff0c;不同的操作系统有不同的FTP应用程序&#xff0c;这些应用程序都遵守同一种协议以…

Python 程序设计入门(007)—— 列表的操作(2):列表元素的排序及统计操作

Python 程序设计入门&#xff08;007&#xff09;—— 列表的操作&#xff08;2&#xff09;&#xff1a;列表元素的排序及统计操作 目录 Python 程序设计入门&#xff08;007&#xff09;—— 列表的操作&#xff08;2&#xff09;&#xff1a;列表元素的排序及统计操作一、列…

LeetCode724. 寻找数组的中心下标

题干 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为在下标的左侧不存在元素。…

k8s概念-pv和pvc

回到目录 kubernetes存储卷的分类太丰富了,每种类型都要写相应的接口与参数才行&#xff0c;这就让维护与管理难度加大。 persistenvolume(PV) 是配置好的一段存储(可以是任意类型的存储卷) 也就是说将网络存储共享出来,配置定义成PV。 PersistentVolumeClaim(PVC)是用户pod使…

Python黑魔法揭秘:装饰器、生成器、异步编程、GIL、描述符和元类

Python中的某些特性被看作是“黑魔法”&#xff0c;原因在于它们的强大功能和复杂性。接下来&#xff0c;让我们深入探索这些特性。 装饰器 装饰器是修改函数或类行为的强大工具&#xff0c;它提供了一种可读性强、代码重用的方式来增强或修改函数或类的行为。装饰器就像一个…

用Rust实现23种设计模式之 职责链模式

关注我&#xff0c;学习Rust不迷路&#xff01;&#xff01; 优点 解耦&#xff1a;职责链模式将请求发送者和接收者解耦&#xff0c;使得多个对象都有机会处理请求&#xff0c;而不是将请求的发送者和接收者紧密耦合在一起。灵活性&#xff1a;可以动态地改变或扩展处理请求…

Thunar配置自定义动作

Add “Copy To” and “Move To” custom actions in Thunar file manager | For the record 1.在此打开终端 图标-应用程序&#xff1a;utilities-terminal 命令&#xff1a;exo-open --working-directory %f --launch TerminalEmulator 文件类型&#xff1a;* 目录 2.右键增…

生成指定网段的IP字典自动化脚本

目录 1.前言 2.生成指定网段的IP字典自动化脚本 1.前言 在可回显的服务端跨站请求伪造(SSRF)漏洞中,我们通常会利用该漏洞进行内网资产探测。最近正好碰到了。写了一个小脚本。 2.生成指定网段的IP字典自动化脚本 脚本可指定协议、IP段、和端口生成字典。 get-Intranet-A…

谁更适合搭配甜点显卡?i7-13700KF、锐龙7 7800X3D对比:游戏相当 生产力Intel强了50%...

一、前言&#xff1a;如果搭配2000元甜点显卡 i7-13700KF和锐龙7 7800X3D谁更有性价比&#xff1f; 现在AMD最受欢迎的处理器无疑是拥有96MB三级缓存的锐龙7 7800X3D&#xff0c;这是一颗专为游戏而生的处理器。 Intel这边&#xff0c;i7-13700KF以略高于i5-13600K的售价&#…

小鱼深度产品测评之:阿里云容器服务器ASK,一款不需购买节点,即可直接部署容器应用。

容器服务器ASK测评 1、引言2、帮助文档3、集群3.1集群列表3.1.1 详情3.1.1.1概览 tab3.1.1.2基本信息 tab3.1.1.4集群资源 tab3.1.1.5 集群日志 tab3.1.1.6 集群任务 tab 3.1.2 应用管理3.1.2.1 详情3.1.2.2 详情3.1.2.3 伸缩3.1.2.4 监控 3.1.3 查看日志3.1.3.1 集群日志3.1.3…