【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="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<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="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;</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="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据" />&nbsp;</div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body>
</html>

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

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

相关文章

二、K8S之Pods

Pod 一、概念 K8S作为一个容器编排管理工具&#xff0c;它可以自动化容器部署、容器扩展、容器负载均衡等任务&#xff0c;并提供容器的自愈能力等功能。在Kubernetes中&#xff0c;Pod是最基本的调度单元&#xff0c;它是一组共享存储和网络资源的容器集合&#xff0c;通常是…

力扣刷题-字符串-(※)重复的子字符串

459.重复的子字符串 给定一个非空的字符串&#xff0c;判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母&#xff0c;并且长度不超过10000。 示例 1: 输入: “abab” 输出: True 解释: 可由子字符串 “ab” 重复两次构成。 示例 2: 输入: “aba” 输…

计算机毕业设计-开题报告答辩常见问题!Javaweb项目答辩

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

快速学习MyBatisPlus

文章目录 前言一、条件构造器和常用接口1.wapper介绍2.QueryWrapper&#xff08;1&#xff09;组装查询条件&#xff08;2&#xff09;组装排序查询&#xff08;3&#xff09;组装删除查询&#xff08;4&#xff09;条件优先级&#xff08;5&#xff09;组装select子句&#xf…

如何使用摩尔信使MThings连接网络设备

帽子&#xff1a; 摩尔信使MThings支持Modbus-TCP、Modbus-RTU Over TCP、Modbus-TCP Over UDP、Modbus-RTU Over UDP。 TCP链接中&#xff0c;摩尔信使MThings支持灵活的连接方式&#xff0c;主机可作为客户端也可以作为服务端&#xff0c;同时支持模拟从机以客户端方式向远…

【数据结构】带头结点的单链表的头插法

首先要说明几个概念&#xff1a; 头结点&#xff0c;是单链表的头结点&#xff0c;一般不存储数据&#xff0c;它指向单链表的第一个实际元素。但它不仅仅只是一个普通的结点&#xff0c;它包含了整个链表的结构&#xff0c;也就是包含了所有插入的结点 #include<stdio.h&…

283 移动零

解题思路&#xff1a; \qquad 适用双指针&#xff0c;l&#xff1a;最左边‘0’元素坐标&#xff1b;r&#xff1a;l右边第一个非零元素坐标。 \qquad 最初的思路&#xff1a;将l和r初始化为0&#xff0c;遍历数组nums若任意一个指针到达数组末尾时停止。若当前nums[l] 0则移…

XTU-OJ 1213-A+B III

题目描述 小明非常喜欢做ab的练习&#xff0c;他不清楚自己是否做对了&#xff0c;所以想找小文帮他看一下。 但是小文不喜欢做ab&#xff0c;所以他只是随意地抽了3题来看一下。 假设小明做了n道&#xff0c;对了m道&#xff0c;那么抽的这三道题都对的概率是多少&#xff1f;…

Leetcode——数组的改变、移动练习

453. 最小操作次数使数组元素相等 本人答案超时 class Solution { public:int minMoves(vector<int>& nums) {int len nums.size();int count 0;if (len 1) {count 0;}else {while (nums[0] ! nums[1] || nums[len - 2] ! nums[len - 1]) {for (int i 0; i <…

【QT】Ubuntu 交叉编译安装 QT 5.12.7 源码

目录 1、下载 QT 源码包 2、搭建安装环境(下载依赖库) 3、创建QT源码编译脚本 4、运行编译脚本 1、下载 QT 源码包 QT5.12.7源码下载地址: download | QT 5.12.7 选择任意一种下载即可&#xff0c;适用于 Windows 和 Linux 环境 这里选择的是.tar.xz 类型&#xff0c;上…

联邦学习综述三

A Survey on Federated Learning Systems Vision Hype and Reality for Data Privacy and Protection 选自&#xff1a;IEEE Transactions on Knowledge and Data Engineering&#xff0c;2021 链接 本文主要从数据分布、机器学习模型、隐私机制、通信架构、联邦规模和联邦动…

velero 迁移k8s集群资源

前言 高版本的velero和低版本的velero部署参数有所变化,网上的文章大多是老旧版本的,另外即便是新版本的,说明以及例子也不够详细,照着做不会成功,故写本文,本文采用最新版本1.12.0进行说明。截止2023-10-11,velero版本为1.12.0。 前提 1、安装minio等velero支持的对象…

Elasticsearch实现检索词自动补全(检索词补全,自动纠错,拼音补全,繁简转换) 包含demo

Elasticsearch实现检索词自动补全 自动补全定义映射字段建立索引测试自动补全 自动纠错查询语句查询结果 拼音补全与繁简转换安装 elasticsearch-analysis-pinyin 插件定义索引与映射建立拼音自动补全索引测试拼音自动补全测试繁简转换自动补全 代码实现demo结构demo获取 自动补…

mongoDB 性能优化

文章目录 前言mongoDB 性能优化1. explain方法来查看查询的执行计划2. 查看mongoDB 集合的索引3. mongoDB 怎么添加索引4. 升序索引与降序索引是什么意思 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易…

java_Stream API

文章目录 一、Stream API vs 集合二、Stream 使用的执行流程2.1、创建Stream2.1、中间操作2.1.1. filter2.1.2. limit2.1.3. skip2.1.4. distinct2.1.5. map2.1.6. sorted 一、Stream API vs 集合 Stream API 关注的是多个数据的计算&#xff08;排序、查找、过滤、映射、遍历…

服务器感染了.360、.halo勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 数据的安全性至关重要&#xff0c;但威胁不断进化&#xff0c;.360、.halo勒索病毒是其中的令人担忧的勒索软件。本文91数据恢复将深入介绍.360、.halo勒索病毒&#xff0c;包括其威胁本质、数据恢复方法和如何采取预防措施来保护您的数据。 如果受感染的数据…

【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说下你的vue项目的目录结…

基于html5开发的Win12网页版,抢先体验

据 MSPoweruser 报道&#xff0c;Windows 11虽然刚刚开始步入正轨&#xff0c;但最新爆料称微软已经在开启下一个计划&#xff0c;Windows 12 的开发将在 去年3 月份开始。德国科技网站 Deskmodder.de 称&#xff0c;根据内部消息&#xff0c;微软将在 2022年3 月开始开发 Wind…

设计模式-11种行为型模式

行为型模式可以影响一个系统的状态和行为流。 责任链模式&#xff1a; 定义一个抽象处理者&#xff0c;其中包含了设置了下一个处理者和对请求的处理两个方法。具体的处理者都实现了这个接口。用于处理多级请&#xff0c;可以将多个处理者对象串联起来&#xff0c;每个处理者都…

1、验证1101序列(Moore)

题目要求&#xff1a; 用Moore型状态机验证1101序列。 题目描述&#xff1a; 用使用状态机验证1101序列&#xff0c;注意&#xff1a;允许重复子序列。如图 端口描述&#xff1a; module moore_1101(input clk,//时钟信号input clr,//reset复位信号&#xff0c;高电平有效in…