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

news2025/2/27 22:54:38

摘要

不管在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,进行操作。

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

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

相关文章

如何创建vue3项目

目录 如何创建vue3项目 1、用vue cli创建 2、使用vite直接创建 3、使用vue3官方推荐创建方式 如何创建vue3项目 创建vue3我们常用的有三种方式&#xff1a; 1、用vue cli创建 1.使用vue cli环境前提条件&#xff1a; node -vv16.13.0 npm -v8.1.0 vue -Vvue/cli 4.5.15 …

微信小程序中使用vant组件库(超详细)

目录前言Vant Weapp的安装与使用1、安装 node.js2、通过 npm 安装3、修改 app.json4、修改 project.config.json5、构建 npm 包6、使用组件全局引入和局部引入全局引入局部引入Toast 组件的使用官方文档 API 详解Props 参数Events 事件Slot 插槽外部样式类前言 Vant是一个轻量…

vue中this.$router.push()路由传值和获取的两种常见方法

今天接到了比较大的需求&#xff0c;由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样&#xff0c;我花了很多时间在摸索&#xff0c;“踏出第一步总是最困难的”&#xff0c;果然没错&#xff0c;第一个很费劲&#xff0c;但完成之后有了思路&#xff0c;下面的…

登录功能的实现(包括前后端)

目录:&#x1f349;&#x1f349;&#x1f349;UPDATE:✨✨✨前言✨✨✨概述✨✨✨技术栈✨✨✨效果图✨✨✨代码✨✨✨github链接&#x1f349;&#x1f349;&#x1f349;UPDATE: 突然发现喜提榜一&#xff0c;蟹蟹读者老爷们的支持(づ&#xffe3; 3&#xffe3;)づ 润色了…

微信小程序完整项目实战(前端+后端)

基于微信小程序的在线商城点单系统 前言&#xff1a;闲来无事&#xff0c;想以后自己开一个小超市或者小吃店&#xff0c;能够支持线上下单&#xff0c;既方便客户也方便自己。系统采用C#语言作为后端实现与小程序的交互&#xff0c;给用来学习或者想自己开个小店的朋友当个参考…

如何在 WordPress 中嵌入 iFrame

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且…

【uniapp小程序开发】—— 组件封装之【自定义轮播图】

文章目录&#x1f34b;前言&#xff1a;&#x1f34d;正文1、首先了解swiper组件1.1、小小的demo示例&#xff1a;1.2、自定义轮播图效果展示说明2、完成自定义轮播图效果3、组件封装——自定义轮播图3.1、创建swiper-doc.vue组件3.2、组件调用&#xff0c;封装完成&#x1f38…

session、cookie、token的区别?

前言 今天就来理一理session、cookie、token这三者之间的关系&#xff01; 1.为什么会有它们&#xff1f; 我们都知道 HTTP 协议是无状态的&#xff0c;所谓的无状态就是客户端每次想要与服务端通信&#xff0c;都必须重新与服务端链接&#xff0c;意味着请求一次客户端和服…

React组件通信-父子组件间的通信

文章目录React父子组件通信认识组件嵌套组件通信父传子参数验证子传父React父子组件通信 认识组件嵌套 组件之间存在嵌套关系&#xff1a; 在之前的案例中&#xff0c;我们只是创建了一个组件App&#xff1b; 如果我们一个应用程序将所有的逻辑都放在一个组件中&#xff0c;那…

适合我的前端学习路线(学习前端不迷路)

适合我的前端学习路线&#xff08;学习前端不迷路&#xff09; 小伙伴们想学习前端&#xff0c;但是却不知如何入手&#xff0c;上网查前端学习路线&#xff0c;第一页往往充斥着各种培训公司的广告&#xff0c;又或者是搜前端学习路线图时&#xff0c;出现大量的路线图导致你还…

【学Vue就跟玩一样】Vue中的路由与多种守卫

1.vue-routervue的一个插件库&#xff0c;专门用来实现对SPA应用的单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面&#xff0c;只会做页面的局部更新。数据需要通过ajax请求获取。2.什么是路由一个路由就是一组…

Tomcat服务器部署+Web项目搭建

Tomcat服务器部署&#xff0b;Web项目搭建 1.Tomcat服务器 1 . Tomcat下载 2 . Tomcat启动与关闭 3 . 配置端口号2.IDEA搭建Web项目 1 . web项目创建 2 . 本地服务器配置 Tomcat下载 tomcat官网&#xff1a;tomcat 1.选择与自己电脑对应的位数下载&#xff0c;我们…

HTML跳动爱心代码|最近很火的爱心代码你还没收到吗

最近很火的跳动爱心代码HTML实现可DIY 看效果 QQ录屏20221108115545点个赞吧,养成好习惯 不想动手的小伙伴可以直接&#x1f447;&#x1f447; 阿里云盘直接提取 阿里云盘 DIY版----提取码: f30q 使用说明 主体代码来源于网络,让我们为原作者点赞&#x1f44d;我用css3的anim…

云服务器部署 Web 项目

一: 搭建 Java 部署环境1: 安装 JDK2: 安装 Tomcat总结3: 安装 MySQL(1): 依次安装(2): 更改配置(3): 启动(4): 测试连接二: 部署 web 项目1: 给服务器准备好依赖的数据2: 微调我们的 Java 代码3: 重新打包4: 上传到服务器上5: 验证一: 搭建 Java 部署环境 之前说过 yum这个命…

手把手教你安装VSCode(附带图解步骤)

一、前端工具vscode 1.1、概述 前端开发是创建Web页面或app等前端界面呈现给用户的过程&#xff0c;通过HTML&#xff0c;CSS及JavaScript以及衍生出来的各种技术、框架、解决方案&#xff0c;来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来&#xff0c;名称上有…

Node安装及配置

目录一、Node安装二、Node环境配置2.1 下载国内淘宝镜像三、下载Node.js项目一、Node安装 首先我们进入Node的官网链接: 下载链接 点击下载&#xff0c;选择自己对应的版本&#xff0c;博主这边使用的Windows 安装包 (.msi) 下载之后双击运行下载包点击下一步 点击change 安装完…

【Vue】悬浮窗和聚焦登录组件经验总结

前言 ​ 本文整理了实现悬浮窗以及聚焦登录组件的功能。 ​ 为的是方便大家和自己的学习。 ​ 省流&#xff1a;可以只看1.2 和 2的代码即可 1 悬浮窗 现在各大流行视频网站的平台都在使用这种悬浮显示的效果&#xff0c;我就想这种东西是怎样搞出来的呢&#xff01;几经尝…

Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)

在前端项目开发中&#xff0c;实现用户的登陆注册功能时常常会有一个问题&#xff0c;那就是我们设置的登录状态&#xff0c;在浏览器页面刷新后就消失了&#xff0c;这其实只是因为我们没有保存用户状态。 这里小马演示使用的是 localStorage vuex 方法&#xff08;其他诸如…

SpringBoot+Vue实现简单用户管理平台第一篇(后端接口设计)

&#x1f680; 注重版权&#xff0c;转载请注明原作者和原文链接&#x1f96d; 作者&#xff1a;Yuan-Programmer&#x1f34e; 主页&#xff1a;https://blog.csdn.net/weixin_47971206/article/details/121368075?spm1001.2014.3001.5502&#x1f349; 进来的小伙伴点点赞呀…

nuxt3:我们开始吧-开发-配置-部署

一、背景介绍 2022 年 11 月 16 日&#xff0c;全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行&#xff0c;并正式发布了 Nuxt.js 3.0 的第一个稳定版本。Nuxt 3 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的现代重写&#xff0c;具有一流的 Typescript 支持&#xff0c;是两年…