【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 …...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
IP如何挑？2025年海外专线IP如何购买？
你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...