React中使用ref

一、如何使用ref

在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:

  • 管理焦点,文本选择或媒体播放;
  • 触发强制动画;
  • 集成第三方 DOM 库;

如何创建refs来获取对应的DOM呢?目前有三种方式:

  • 方式一:传入字符串
    使用时通过 this.refs.传入的字符串格式获取对应的元素;
    在这里插入图片描述
import React, { PureComponent } from "react";
import PropTypes from "prop-types";class App extends PureComponent {componentDidMount() {}render() {return (<div><h2 ref="titleRef">Hello React</h2><button onClick={(e) => this.changeText()}>改变文本</button></div>);}changeText() {this.refs.titleRef.innerHTML = 'zepp'}
}App.propTypes = {};export default App;

在这里插入图片描述

  • 方式二:传入一个对象
    对象是通过 React.createRef() 方式创建出来的;
    使用时获取到创建的对象其中有一个current属性就是对应的元素;
    在这里插入图片描述
import React, { PureComponent, createRef } from "react";
import PropTypes from "prop-types";class App extends PureComponent {constructor(props) {super(props);this.titleRef = createRef();}render() {return (<div>{/* <h2 ref="titleRef">Hello React</h2> */}<h2 ref={this.titleRef}>Hello React</h2><button onClick={(e) => this.changeText()}>改变文本</button></div>);}changeText() {// 1.使用方式一:字符串//   this.refs.titleRef.innerHTML = 'zepp'// 2.使用方式二:对象方式console.log(this.titleRef);this.titleRef.current.innerHTML = 'zep~'}
}App.propTypes = {};export default App;

在这里插入图片描述

  • 方式三:传入一个函数
    该函数会在DOM被挂载时进行回调,这个函数会传入一个 元素对象,我们可以自己保存;
    使用时,直接拿到之前保存的元素对象即可;
    在这里插入图片描述
import React, { PureComponent, createRef } from "react";
import PropTypes from "prop-types";class App extends PureComponent {constructor(props) {super(props);// this.titleRef = createRef();this.titleEl = null}render() {return (<div>{/* <h2 ref="titleRef">Hello React</h2> */}{/* <h2 ref={this.titleRef}>Hello React</h2> */}<h2 ref={arg => this.titleEl = arg}>Hello React</h2><button onClick={(e) => this.changeText()}>改变文本</button></div>);}changeText() {// 1.使用方式一:字符串//   this.refs.titleRef.innerHTML = 'zepp'// 2.使用方式二:对象方式// console.log(this.titleRef);// this.titleRef.current.innerHTML = 'zep~'// 3. 使用方式三:回调函数方式console.log(this.titleEl);this.titleEl.innerHTML = 'zep!!!'}
}App.propTypes = {};export default App;

在这里插入图片描述

二、ref的类型

ref 的值根据节点的类型而有所不同:

  • 当 ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;
  • 当 ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性;
  • 你不能在函数组件上使用 ref 属性,因为他们没有实例;

这里我们演示一下ref引用一个class组件对象:

在这里插入图片描述

在这里插入图片描述

import React, { PureComponent, createRef } from "react";
class Counter extends PureComponent {constructor(props) {super(props);this.state = {counter: 0,};}render() {return (<div><h2>当前计数: {this.state.counter}</h2><button onClick={(e) => this.increment()}>+1</button></div>);}increment() {this.setState({counter: this.state.counter + 1,});}
}
class App extends PureComponent {constructor(props) {super(props);this.counterRef = createRef();}render() {return (<div><Counter ref={this.counterRef} /><button onClick={(e) => this.appBtn()}>APP按钮</button></div>);}appBtn() {console.log(this.counterRef.current);this.counterRef.current.increment();}
}
export default App;
  • 函数式组件是没有实例的,所以无法通过ref获取他们的实例:
    但是某些时候,我们可能想要获取函数式组件中的某个DOM元素; 这个时候我们可以通过 React.forwardRef ,后面学习 hooks 中如何使用ref;

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

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

相关文章

python合并word表格单元格_python docx模块读取word表格遇到合并单元格时的处理

python docx模块读取word表格遇到合并单元格时的处理python docx模块读取word表格遇到合并单元格时的处理python docx模块读取word表 遇到合并单元格时的处理通过docx模块&#xff0c;读取word里面表格&#xff0c;并进行修改。现在我遇到的表格是这样&#xff1a;里面行&#…

React中的受控组件和非受控组件

一、认识受控组件 在React中&#xff0c;HTML表单的处理方式和普通的DOM元素不太一样&#xff1a;表单元素通常会保存在一些内部的state。 比如下面的HTML表单元素&#xff1a; 这个处理方式是DOM默认处理HTML表单的行为&#xff0c;在用户点击提交时会提交到某个服务器中&…

关于div居中

margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中转载于:https://www.cnblogs.com/jiangjing/p/5764820.html

JavaScrip入门-变量计算%函数

哈 <html> <body> <script>var hello"Hello ";hellohello" world!";var age1161;var age220var ottrue; document.write(helloage1);<!--Hello world!17 因为中间空两行 -->document.write(age1age2);//falsedocument.write(age1 …

摩尔斯电码转换python编码_Morse Code 用Python做个摩斯密码转换器

摩斯密码摩尔斯电码(又译为摩斯密码&#xff0c;Morse code)是一种时通时断的信号代码&#xff0c;通过不同的排列顺序来表达不同的英文字母、数字和标点符号&#xff0c;不同于现代只使用零和一两种状态的二进制代码&#xff0c;它的代码包括五种&#xff1a; 点、划、点和划之…

JS动画 | 用TweenMax实现收集水滴效果

之前在CodePen上接触了TweenMax, 被它能做到的酷炫效果震撼了. (文末放了5个GSAP的效果GIF) 最近要做一个"收集水滴"的动效, 于是就试用了一下TweenMax实现这个效果. 什么是TweenMax TweenMax是GSAP(GreenSock Animation Platform)创作的动画工具库. GSAP的产品除了T…

React中的组件通信——父传子、子传父、Context

0、认识组件间的通信 在开发过程中&#xff0c;我们会经常遇到需要组件之间相互进行通信&#xff1a; 比如App可能使用了多个Header&#xff0c;每个地方的Header展示的内容不同&#xff0c;那么我们就需要使用者传递给Header一些数据&#xff0c;让其进行展示&#xff1b;又比…

python控制步进电机驱动器_树莓派操作案例1-使用python GPIO+TB6612驱动步进电机

原理图:接口说明A控制信号输入------PWMA VM ------电机驱动电压输入端(4.5V-15V)A电机输入端2 ------AIN2 VCC ------逻辑电平输入端(2.7V-5.5V)A电机输入端1 ------AIN1 GND ------ 接地正常工作/待机状态控制端------STBY …

遍历输出所有子视图(View)

传入一个View,可以获取传入视图的所有子视图&#xff0c;写入桌面&#xff0c;可以在火狐浏览器下查看 /*** 程序获得了焦点就会自动调用这个方法(只要程序获得了焦点,所有控件才能接收触摸事件)*/ - (void)applicationDidBecomeActive:(UIApplication *)application {NSStrin…

React ref的转发

在前面学习ref时讲过&#xff0c;ref不能应用于函数式组件&#xff1a; 因为函数式组件没有实例&#xff0c;所以不能获取到对应的组件对象 但是&#xff0c;在开发中我们可能想要获取函数式组件中某个元素的DOM&#xff0c;这个时候我们应该如何操作呢&#xff1f; 方式一&…

python tkinter 输入数字 小数_Python3 tkinter基础 Entry validate isdigit 只能输入数字的输入框...

Python : 3.7.0OS : Ubuntu 18.04.1 LTSIDE : PyCharm 2018.2.4Conda : 4.5.11typesetting : Markdowncode"""Author : 行初心Date : 18-10-1Blog : www.cnblogs.com/xingchuxinGitee : gitee.com/zhichengjiu"""from tkinter import *def test(…

电脑桌面 IE 图标删除不了的解决方法

电脑换了系统之后想把桌面的IE浏览器给删掉&#xff0c;可是直接删除又删不掉&#xff0c;杀毒软件查杀也没有问题。找了很多方法&#xff0c;终于才把它给解决了。下面&#xff0c;就把我的方法分享给桌面ie图标删除不了的解决方法&#xff0c;希望能对大家有所帮助! 方法 1 1…

React Portals的使用

某些情况下&#xff0c;我们希望渲染的内容独立于父组件&#xff0c;甚至是独立于当前挂载到的DOM元素中&#xff08;默认都是挂载到id为root的DOM元 素上的&#xff09;。 Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案&#xff1a; 第一个参数&a…

绿盟防火墙配置手册_双链路环境下不同品牌防火墙更换案例分享

关注“IT实战基地”&#xff0c;与行业大咖交流学习&#xff01;引言不同品牌防火墙在整体更换时&#xff0c;实施迁移时除了将防火墙的接口IP地址&#xff0c;路由&#xff0c;安全策略进行迁移时&#xff0c;在实际更换时还可能遇到一切奇怪的问题&#xff0c;尤其是在双链路…

React中的fragment和StrictMode

一、fragment 在之前的开发中&#xff0c;我们总是在一个组件中返回内容时包裹一个div元素&#xff1a; 我们又希望可以不渲染这样一个div应该如何操作呢&#xff1f; 使用FragmentFragment 允许你将子列表分组&#xff0c;而无需向 DOM 添加额外节点&#xff1b; React还…

怎么让车辆gps定位失效_如何更有效地检测车辆gps定位器?

GPS定位器可以帮助我们管理我们心爱的汽车&#xff0c;在任何时候定位和查询车辆的位置&#xff0c;并跟踪车辆防盗&#xff0c;一些汽车公司和公共交通企业也可以管理和调度车队&#xff0c;管理数据&#xff0c;并根据GPS定位器分析数据&#xff0c;实现智能和现代交通。GPS定…

云平台需要开发的底层功能

1、WEB与手机的消息通讯 http://www.rongcloud.cn/docs/web.html 可以实现各种系统消息的WEB和手机同时接收。 2、扩展底层支持幼儿&#xff0c;基础&#xff0c;职业&#xff0c;高师全领域&#xff0c;从人员&#xff0c;机构&#xff0c;部门&#xff0c;院系&#xff0c;专…

React中的CSS——styled-components

一、认识CSS in JS 实际上&#xff0c;官方文档也有提到过CSS in JS这种方案&#xff1a; https://zh-hans.reactjs.org/docs/faq-styling.html “CSS-in-JS” 是指一种模式&#xff0c;其中 CSS 由 JavaScript 生成而不是在外部文件中定义&#xff1b;注意此功能并不是 Reac…

l380废墨收集垫已到使用寿命_湖北雨水收集系统定制

淮北海聚环保设备有限公司为您详细解读jrWVof湖北雨水收集系统定制的相关知识与详情&#xff0c; 1、三格化粪池&#xff0c;可设想为长方形或圆形。各粪池容积计较根据粪水储存时间定&#xff0c;即一般可按2&#xff1a;1&#xff1a;3计较。号池储存20天&#xff0c;2…

React脚手架学习笔记

一、前端工程的复杂化 如果我们只是开发几个小的demo程序&#xff0c;那么永远不需要考虑一些复杂的问题&#xff1a; 比如目录结构如何组织划分&#xff1b;比如如何管理文件之间的相互依赖&#xff1b;比如如何管理第三方模块的依赖&#xff1b;比如项目发布前如何压缩、打包…