【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、二分查…...
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 …...
shell脚本学习笔记03（小滴课堂）
在shell脚本中，表示变量除了可以使用$a(a是一个变量)，还可以使用${a} 那这两种表示方式有什么区别么？ 花括号可以和其它字符或者字母区分开来。 >追加内容 我们发现使用>会把原来的内容覆盖。 我们使用>>就不会覆盖了ÿ…...
软件工程和计算机科学与技术学习方向区别
软件工程（Software Engineering）和计算机科学与技术（Computer Science and Technology）是两个相关但不同的领域，它们涉及到计算机和软件的不同方面。以下是它们之间的主要区别： 计算机科学与技术ÿ…...
React常用hooks总结
React Hooks react常用hooks React Hooks React Hooks是React16.8版本新增的特性，它允许你在不编写class的情况下使用state以及生命周期等特性。 在React中，组件的创建方式有两种：类组件和纯函数组件。 然而，函数组件没有状态…...
【算法学习】-【滑动窗口】-【找到字符串中所有字母异位词】
LeetCode原题链接：438. 找到字符串中所有字母异位词 下面是题目描述： 给定两个字符串 s 和 p，找到 s 中所有 p 的 异位词 的子串，返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&…...
利用python学习如何处理需要登录的网站
要处理需要登录的网站，你可以按照以下步骤进行学习： 了解网站的登录机制：登录机制通常有用户名密码登录、OAuth授权登录、Cookie登录等。了解目标网站使用的登录机制是学习处理的第一步。 使用Web抓取工具模拟登录：通过使用工具如…...
vue适配各个屏幕
1:不是响应式，只是用缩放来适配各个pc 2：使用中会出现由于 transform 属性导致的定位问题，具体的需要针对性的处理 App.vue <div id"app" ><div class"app-view" :style"{--scale:scale}"><…...
在conda创建的虚拟环境中安装jupyter以及使用
1. 进入你的虚拟环境 conda activate conda_env_name 2. 安装jupyter notebook conda install -y jupyter 3. 启动jupyter jupyter notebook 4. 将conda环境添加到jupyter的内核中 conda install ipykernel python -m ipykernel install --name conda_env_namepython -m…...
【Java 8的新特性】
引言 Java 8是Java编程语言的一个重要里程碑，它引入了许多令人兴奋的新特性和改进。这些新特性不仅使Java编程更加简洁和高效，还提供了更多的功能和灵活性。在本文中，我们将探讨Java 8的一些重要新特性，并展示它们是如何改变我们…...
Android+Appium自动化测试环境搭建及实操
1、Appium简介1.1 Appium概念1.2 Appium工作原理 2、Appium Server环境搭建2.1 Java JDK2.1.1 下载JDK2.1.2 运行exe安装JDK，设置安装路径2.1.3 设置环境变量2.1.4 验证安装结果 2.2 Android SDK2.2.1 下载安装Android SDK安装包2.2.2 下载platform-tools࿰…...
NetSuite ERP系统健康检查
这个题目来自最近的一个项目感受，“上线即停滞”。这是在中小型企业十分普遍的一个情况，一旦上线后，基本上信息化的建设就停止了。这是一个中小企业信息化的一个特点，因为其IT力量比较弱，所以在信息化的推动中缺乏话语…...