【06】基础知识：React组件实例三大核心属性 - ref
一、 ref 了解
理解
组件内的标签可以定义 ref 属性来标识自己
使用
1、字符串形式的 ref
定义：<input ref="input"/>
获取：this.refs.input
2、回调形式的 ref
定义：<input ref={currentNode => this.input = currentNode} />
定义简写：<input ref={c => this.input = c} />
获取DOM元素：this.input
3、createRef创建 ref 容器
创建容器：myRef = React.createRef()
绑定：<input ref={this.myRef}/>
获取：this.myRef.current
二、案例
需求：自定义组件， 功能说明如下
点击按钮，提示第一个输入框中的值
当第2个输入框失去焦点时，提示这个输入框中的值
1、字符串形式的 ref （过时，不推荐，存在一些效率问题）
通过 ref 给标签打标识，通过组件实例的 refs 属性获取对应的 DOM 元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_字符串形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {render() {return (<div><input ref="input1" type="text" placeholder="点击按钮提示数据" /> <button onClick={this.showData}>点我提示左侧的数据</button> <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /></div>)}// 展示左侧输入框的数据showData = () => {const { input1 } = this.refsalert(input1.value)}// 展示右侧输入框数据showData2 = () => {alert(this.refs.input2.value)}}ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))</script>
</body>
</html>
2、回调函数形式的ref
拿到当前 ref 所在的节点，React 调用回调函数，传入节点，挂载在实例自身，赋值给 input1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_回调函数形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {render() {return (<div><input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据" /> <button onClick={this.showData}>点我提示左侧的数据</button> <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /> </div>)}// 展示左侧输入框的数据showData = () => {const { input1 } = thisalert(input1.value)}// 展示右侧输入框的数据showData2 = () => {alert(this.input2.value)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body>
</html>
3、回调ref中回调执行次数的问题
如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会执行两次，第一次传入参数null，然后第二次会传入参数 DOM 元素。
这是因为在每次渲染是会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。
通过将 ref 的回调函数定成 class 的绑定函数的方式可以避免上述问题，但大多数情况下它是无关紧要的。
内联函数方式定义（推荐，写法简单）:
执行 1+n*2 次，初次渲染和更新时执行（第一次null，第二次DOM元素），不会产生什么问题。
绑定函数形式：
执行1次，初次渲染时执行。
jsx 中写注释：{/* … */}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_回调ref中回调执行次数的问题</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {state = { isHot: false }render() {return (<div>{/* <input ref={c => { this.input = c; console.log('@', c) }} type="text" /> */}<input ref={this.saveInput} type="text" /><button onClick={this.showData}>点我提示内容</button><br /><h2>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h2><button onClick={this.changeWeather}>点我切换天气</button></div>)}showData = () => {alert(this.input.value)}changeWeather = () => {this.setState({isHot: !this.state.isHot})}saveInput = c => {this.input = cconsole.log('@', c) // 初次渲染时执行1次}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body>
</html>
4、createRef的使用
React.createRef 调用后可以返回一个容器，该容器可以存储被 ref 所标识的节点，该容器是【专人专用】的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4_createRef的使用</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {myRef = React.createRef()myRef2 = React.createRef()showData = () => {// console.log(this.myRef) // 通过current取DOM元素alert(this.myRef.current.value)}showData2 = () => {alert(this.myRef2.current.value)}render() {return (<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /> <button onClick={this.showData}>点我提示左侧的数据</button> <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据" /> </div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body>
</html>
相关文章：
【06】基础知识：React组件实例三大核心属性 - ref
一、 ref 了解 理解 组件内的标签可以定义 ref 属性来标识自己 使用 1、字符串形式的 ref 定义：<input ref"input"/> 获取：this.refs.input2、回调形式的 ref 定义：<input ref{currentNode > this.input curren…...
Bootstrap-媒体类型
加上媒体查询之后，只有在特定的设备之下才能起作用！！！...
spring Cloud笔记--服务治理Eureka
服务治理：Eureka 服务治理 主要用来实现各个微服务实例的自动化注册与发现 服务注册： 服务治理框架中，通常会构建一个注册中心，每个服务单元向注册中心登记自己提供的服务，将主机与端口号，版本号&#x…...
pdf压缩文件怎么压缩最小？pdf压缩方法汇总
PDF是一种常见的文件格式，通常用于电子文档和印刷品，由于PDF文件通常包含大量的元数据、字体、图像和其他元素，因此它们的大小可能会非常大。 为了解决这个问题，我们可以使用一些PDF压缩工具来帮助我们，以便我们能够更…...
Golang学习记录：基础篇练习（一）
Golang学习记录：基础篇练习（一） 1、九九乘法表2、水仙花数3、斐波那契数列4、编写一个函数，求100以内的质数5、统计字符串里面的字母、数字、空格以及其他字符的个数6、二维数组对角线的和7、冒泡排序算法8、选择排序算法9、二分查…...
, python 实现盲注爆破数据库名, 表名, 列名)
sql注入(7), python 实现盲注爆破数据库名, 表名, 列名
python 实现盲注 该python脚本根据之前介绍的盲注原理实现, 对于发送的注入请求没有做等待间隔, 可能给目标服务器造成一定 压力, 所以仅限于本地测试使用. import requests, time# 时间型盲注 def time_blind(base_url, cookie):for length in range(1, 20): # 测试数据库名…...
2021年12月 Python（二级）真题解析#中国电子学会#全国青少年软件编程等级考试
Python编程（1~6级）全部真题・点这里 C/C编程（1~8级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 执行以下程序 a[33,55,22,77] a.sort() for i in a:print(i)运行…...
预备知识点)
卡尔曼家族从零解剖-(01)预备知识点
讲解关于slam一系列文章汇总链接:史上最全slam从零开始，针对于本栏目讲解的 卡尔曼家族从零解剖 链接 :卡尔曼家族从零解剖-(00)目录最新无死角讲解：https://blog.csdn.net/weixin_43013761/article/details/133846882 文末正下方中心提供了本人 联系…...
技术分享| 二进制部署MySQL
一、介绍 MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的 RDBMS (Relational Database Management System&#x…...
3.1 模板测试与深度测试（Stencil Test Z Test）
一、模板测试（Stencil Test） 模板测试可以实现的一些效果图 1.是什么 ①从渲染管线出发：模板测试是在逐片源操作阶段，透明测试之后，深度测试之前的位置。 ②从书面概念上理解 说到模板测试，就要先说道模…...
一些常见的必须会的谭浩强基本代码大全也是常考的应试是没问题的
//1. 1£¡+2£¡+3£¡+...20! /* #include <stdio.h> int main() {int i;long sum=0,k=1;for(i=1;i<=20;i++){k*=i;sum+=k;}printf("%d",sum); } *///方法2 /* #include <stdio.h> int main() {int i,j;long sum=0,k;for(i…...
C语言天花板——指针（进阶1）
接上次的指针初阶（http://t.csdnimg.cn/oox5s），这次我们继续的探寻指针的奥秘，发车咯！！！🚗🚗🚗 一、字符指针 可以看到我们将指针p给打印出来，就是…...
二、深度测试（Z Test）
1.是什么 ①从渲染管线出发 ②书面上理解 所谓深度测试，就是针对当前对象在屏幕上（更准确的说是frame buffer）对应的像素点，讲对象自身的深度值与当前该像素点缓存的深度值进行比较，如果通过了，本对象再改…...
Vue_Bug VUE-ADMIN-TEMPLATE-MASTER electron build后无法登录
Bug描述： VUE-ADMIN-TEMPLATE-MASTER 项目在经过 electron 的 build 命令后，无法登录 问题原因： 大部分vue 前段项目 会使用 js-cookie 这个库 来操作浏览器的cookie 然而这个库 在electron下 会无法使用 （最坑的是还没报错&…...
睡衣内衣服装商城小程序的作用是什么
服装行业一直都是市场很重要的组成部分，每个人都需要，且根据品牌、样式作用等可以细分很多类目，其中睡衣内衣也有不小的市场规模，从业商家多、市场需求度高。 但同时睡衣内衣经营痛点也比较明显。 当今消费者习惯于线上消费&…...
idea怎么设置作者信息（详细）
目录 一：在Java类的开头自动注释作者名字和日期等信息 二：给Java的方法注释作者名字和日期等信息 1. 不可修改的模板：Postfix Completion 2. 可修改的模板：Live Templates tips：首先给大家推荐两款好用的免费软件&…...
产品经理如何有效跟进开发进度？
作为产品经理，很难跟进开发过程。随着软件开发的复杂性和不断变化的产品环境，产品经理必须保持在开发过程的顶端，并确保目标得到满足。产品经理如何跟进开发进度？ 第一步是对开发过程本身有一个扎实的理解。产品经理必须熟悉开发过…...
【已解决】Qt无法追踪到mouse移动事件
本博文源于笔者正在亲身经历的Qt无法追踪到鼠标移动事件。事情是这样的，笔者有一个应用程序，当应用程序移动进窗口里的时候，每移动一下，检测鼠标位置，进而调整鼠标的形状，结果发现它这死活不听话。后来解决…...
Dubbo从0到1——万字完整学习笔记
目录 RPC理论概述 RPC的基本思想 RPC的实现组成部分 RPC的实现流程 RPC的核心思想 RPC调用分类 初识Dubbo Dubbo特性 Dubbo设计架构 zookeeper环境搭建 搭建注册中心环境 搭建监控中心环境 Dubbo入门案例(Dubbo Spring) 实现步骤 搭建中介者组件共享资源 打包为jar…...
Rust初接触
一、什么是Rust Rust 是由 Mozilla 开发的多范式编程语言，专注于性能和安全性。 Rust 以其先进的安全并发能力而闻名， 它的语法类似于 C，但它提供了更快的速度和内存安全性，但不使用垃圾收集器。 Rust 最初是为 Mozilla Firefox …...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...
Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）
引言 工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础
第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...
企业大模型服务合规指南：深度解析备案与登记制度
伴随AI技术的爆炸式发展，尤其是大模型（LLM）在各行各业的深度应用和整合，企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者，还是积极拥抱AI转型的传统企业，在面向公众…...
Linux-进程间的通信
1、IPC： Inter Process Communication（进程间通信）： 由于每个进程在操作系统中有独立的地址空间，它们不能像线程那样直接访问彼此的内存，所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...
边缘计算网关提升水产养殖尾水处理的远程运维效率
一、项目背景 随着水产养殖行业的快速发展，养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下，而且难以实现精准监控和管理。为了提升尾水处理的效果和效率，同时降低人力成本，某大型水产养殖企业决定…...
LeetCode 0386.字典序排数：细心总结条件
【LetMeFly】386.字典序排数：细心总结条件 力扣题目链接：https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n ，按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...