【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 …...
人工智能入门全景图：Nanbeige 4.1-3B带你梳理AI核心概念与技术栈
人工智能入门全景图：Nanbeige 4.1-3B带你梳理AI核心概念与技术栈 你是不是也对人工智能充满好奇，但一看到那些复杂的术语和庞大的技术栈就感到无从下手？机器学习、深度学习、神经网络、NLP、CV……这些词听起来很酷，但它们到底是…...
C++的std--ranges视图缓存
C的std::ranges视图缓存：高效数据处理的现代利器 在C20中，std::ranges库的引入彻底改变了数据处理的范式，其中视图缓存（View Caching）作为一项关键技术，显著提升了代码的性能与可读性。视图缓存允许开发者…...
AMD Ryzen平台硬件调试与性能优化实战指南：基于SMUDebugTool的系统级解决方案
AMD Ryzen平台硬件调试与性能优化实战指南：基于SMUDebugTool的系统级解决方案 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. …...
Source Han Serif CN：7种字重如何改变你的中文排版体验？
Source Han Serif CN：7种字重如何改变你的中文排版体验？ 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 你是否曾为寻找合适的中文字体而烦恼？商业字…...
Anno 1800模组加载器：从入门到精通的完整指南
Anno 1800模组加载器：从入门到精通的完整指南 【免费下载链接】anno1800-mod-loader The one and only mod loader for Anno 1800, supports loading of unpacked RDA files, XML merging and Python mods. 项目地址: https://gitcode.com/gh_mirrors/an/anno1800…...
DAMO-YOLO手机检测一文详解：tinynas主干网络轻量化设计优势
DAMO-YOLO手机检测一文详解：tinynas主干网络轻量化设计优势 1. 引言：为什么我们需要一个又快又准的手机检测器？ 想象一下，你正在开发一个智能会议室管理系统，需要实时统计参会人数和他们的行为。其中一个关键功能是检…...
智能简化黑苹果配置：OpCore Simplify为技术爱好者打造的自动化解决方案
智能简化黑苹果配置：OpCore Simplify为技术爱好者打造的自动化解决方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore Simplify是…...
OpenClaw安全防护：运行百川2-13B-4bits模型时的5条系统权限建议
OpenClaw安全防护：运行百川2-13B-4bits模型时的5条系统权限建议 1. 为什么需要安全防护 当我第一次在本地部署OpenClaw并接入百川2-13B-4bits模型时，那种兴奋感至今难忘——终于可以在自己的电脑上运行一个强大的AI助手了。但很快，一个意外…...
开源工具KeyboardChatterBlocker：机械键盘连击问题的智能解决方案
开源工具KeyboardChatterBlocker：机械键盘连击问题的智能解决方案 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 机械键盘以…...
本地部署音效生成器 Moodist 并实现外部访问
Moodist 是基于 MIT 许可的开源白噪音平台，提供了超过 75 种不同的环境声音，可以帮助用户集中注意力、保持冷静或进入放松状态。它还支持持久化声音选择，用户能够自定义声音预设，分享他们的音频配置给他人，并且集成睡眠…...