React中ref的使用方法和使用场景(详解)

2023-05-16

摘要

不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref。

而Vue中的ref可能比较简单,这一篇主要讲一下如何在React中使用ref,以及使用ref的场景。

1.ref的挂载

在React中,ref可以挂载到html元素上,同时也可以挂载在React元素上,看下面的代码:

import React, { Component } from 'react'
// import { findDOMNode } from 'react-dom'
import Child from './Child'

export default class Father extends Component {

  componentDidMount(){
    console.log(this.refs.refElement);
    console.log(this.refs.child);
  }

  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <Child ref={ 'child' }/>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

控制台的打印为:

在这里插入图片描述
可以看到,在React中,ref是可以挂载到HTML元素和React元素上的。

(1)挂载HTML元素,返回真实的DOM
(2)挂载React元素,返回render后的实例对象

同时React也提供了一个方法findDOMNode可以将React元素的ref返回变成真实的DOM元素。

	import { findDOMNode } from 'react-dom'
    console.log(findDOMNode(this.refs.child));

同时在上面的代码我们也可以看出来,ref的挂载是在componentDidMount等生命周期之前执行的

2.使用ref的三种方式

(1)字符串的方式

import React, { Component } from 'react'

export default class Father extends Component {

  componentDidMount(){
    console.log(this.refs.refElement);
  }

  render() {
    return (
      <div>
        <input ref={ 'refElement' }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

这种方式和Vue的ref比较相似,但是官方目前已经不推荐使用该方式,后续可能还会废弃。

(2)函数的方式

import React, { Component } from 'react'

export default class Father extends Component {

  componentDidMount(){
    console.log(this.refElement);
  }

  render() {
    return (
      <div>
        <input ref={ ref => this.refElement = ref }></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

(3)react.CreateRef的方式

import React, { Component } from 'react'

export default class Father extends Component {

  refElement = React.createRef();

  componentDidMount(){
    console.log(this.refElement.current);
  }

  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>123</button>
      </div>
    )
  }
}

记住这里面通过refElement中的current,获取真实的DOM元素。

3.ref的使用场景

这里我们说一个比较常见的场景,就是点击按钮让输入框聚焦:

import React, { Component } from 'react'

export default class Father extends Component {

  refElement = React.createRef();

  componentDidMount(){
    console.log(this.refElement.current);
  }

  fn = ()=>{
    this.refElement.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={this.refElement}></input>
        <button onClick={this.fn}>聚焦</button>
      </div>
    )
  }
}

通过获取DOM后,调用DOM上的focus方法API,来让input框进行聚焦。

同时ref也可以适用于一些DOM元素的动画效果,例如移动,变大变小,都需要通过ref来控制DOM,进行操作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React中ref的使用方法和使用场景(详解) 的相关文章

随机推荐

  • Python:把列表内容按行数写入txt

    事情的起因是我需要把一个元素全为数字的列表按固定列数写入txt文件 xff0c 也就是每行几个元素 xff0c 用逗号隔开 看了一些网上的分享觉得都不太合适 xff0c 于是自己想了一个办法 xff0c 一行代码解决 xff0c 废话少说
  • 解决Git提交代码报错: ERROR: commit xxxxx: missing Change-Id in message footer

    在近期的工作中完成代码修改提交代码时Git报错并提示提交不成功 xff0c 具体错误如下 xff1a 原因是Change Id缺失 至于解决方法 xff0c Git在报错时已经提示了 xff0c 如下图黄框所示 xff1a 首先 xff0c
  • 如何实现用串口助手实时绘制16位数据波形图

    先和大家kuan两句 xff0c 哈哈 因为之前参加智能车想用波形显示来调节PID xff0c 找了很多工具也没有成功 xff0c 心里也知道串口一次就是只能发送八位数据 xff0c 很多时候可以用字符显示16位的 xff0c 但是就不是数
  • STM32之中断方式实现串口通信

    中断方式实现串口通信 一 创建项目二 编写代码三 运行四 总结 一 创建项目 创建一个STM32f103c8的STM32CubeMX项目 xff1a SYS设置 xff1a RCC设置 xff1a 时钟树设置 xff0c 输入72后回车 x
  • 1.(1)数据结构之链表-typedef的用法

    本人坚持更新C语言 xff0c 数据结构 xff0c 操作系统知识 xff0c 可以收藏 xff0b 关注随时了解 x1f61c x1f61c x1f61c 目录 我们在之前学习结构体的时候 xff0c 是如何定义结构体的呢 xff1f t
  • gazebo 中创建含有二维码的墙的模型

    1 新建空白墙的模型 在gazebo中添加一个Edit gt Building Editor xff0c 生成sdf文件 xff0c 放在 gazebo models文件夹下 如图Untitled1 编辑model sdf文件 xff0c
  • 在vscode中开发arduino编译巨慢解决办法

    每次在vscode中 编译Arduino花费的时间巨长 xff0c 等的好烦 xff0c 仔细一看每次在Arduino 输出控制台上会出现一个警告 Warning Output path is not specified Unable to
  • 工作空间中的devel和build文件夹可以删掉

    工作空间中的devel和build文件夹可以删掉 xff0c 再cmake就可以产生
  • IOT的核心—无线通讯模块

    文章目录 前言一 IOT是什么 xff1f 1 IOT的运用 1 智能家居 2 无线控制 2 IOT总结 三 如何从互联网转换为物联网简述芯百特的CB2401与CB2402 1 CB2401介绍内部结构与管脚图产品应用评估板原理图 2 CB
  • STM32F103C8T6 串口3(USART3) 只能发不能收

    问题原因 xff1a 今天因为上述问题 困扰一天 xff01 最后发现是 PB8 9 xff08 配置输出 xff09 硬件短路了 xff01 问题现象 xff1a STM32F103C8T6 串口3 USART3 只能发不能收 xff01
  • eNSP第四篇:IP地址,逻辑接口,接口类型,三层路由接口,二层路由接口

    IP地址 xff0c 逻辑接口 xff0c 接口类型 xff0c 三层路由接口 xff0c 二层路由接口 私有IP地址的范围 IP范围 默认掩码 A类 10 0 0 0 10 255 255 255 255 0 0 0 B类 172 16
  • IMU及磁力计AHRS系统控制(一):传感器物理实现原理

    AHRS系统前言 AHRS是 Attitude and heading reference system 的英文缩写 xff0c 百度对此的解释是 航姿参考系统 xff0c 按笔者比较浅薄的理解就是在计算平台上通过算法处理一套部署在被控对象
  • 归并排序(C语言)详解

    记录学习第五天 今天记录一下归并排序 xff0c 因为在csdn里面没有找到特别清楚的解析 xff0c 所以想自己写的认真一点 xff0c 也查阅了一些资料 xff0c 通过这篇博客记录一下 xff1b 归并排序 xff0c 光看字面 xf
  • HTML的块级元素(常用整理)

    emmm xff0c 最近想整理复习一下前端的基础 xff0c 最开始的HTML想了好久也没想好怎么写 xff0c 最后也是决定以行块这样整理 xff0c 再在后面补充吧 说到HTML xff0c 什么是HTML呢 xff1f 什么是 HT
  • JS实现快速排序(代码+讲解)

    OK xff0c 排序这一个篇章也快要结束了 这一篇主要说的是快速排序 xff0c 说的方式主要还是先说原理 xff0c 然后再用代码来进行实现 所谓快速排序 xff0c 就是分为三步走 xff1a 第一步 xff1a 选择第一个数字分离出
  • Object.defineProperty方法(详解)

    OK xff0c 这一篇主要想说一下Object defineProperty这个方法 这个方法也是Vue数据双向绑定原理的常见面试题 所以也是有必要好好掌握的哦 首先我们知道JS中是支持面向对象编程的 xff0c 也是有着对象和类这样的概
  • 原生JS实现Promise(详解)

    摘要 首先呢 xff0c Promise是异步中比较重要的知识点 xff0c 学习的最好方法就是掌握它的基本原理 所以这一篇主要说一下如何用JS来实现一个自己的promise 构造函数 首先我们来看一下我们是如何使用promise的 xff
  • 解决winscp连接ubuntu虚拟机连续超时

    1 禁用虚拟机网络 在windows系统找到网络适配器 xff0c 禁用VMnet1和VMnet8 2 更改网络连接模式并测试网络是否连通 菜单栏 虚拟机 设置 网络适配器 xff0c 将网络模式改为桥接模式 xff0c 勾选 复制物理网络
  • Http的各种请求方法(详解)

    摘要 我们知道 xff0c 当我们访问各种网页的时候 xff0c 之所以能够看到页面 xff0c 根本原因是发送了http请求然后得到了响应 xff0c 从而页面才会弹出来 再或者我们上传一些照片和视频时 xff0c 之所以可以上传成功也是
  • React中ref的使用方法和使用场景(详解)

    摘要 不管在Vue中还是React xff0c 如果我们想使用一个元素的DOM xff0c 不需要通过JS中操纵DOM的方法 xff0c 它们提供了一个专属的API就是ref 而Vue中的ref可能比较简单 xff0c 这一篇主要讲一下如何