React基础教程(06):Ref的应用

7、Ref的应用

7.1 给标签设置ref="username"

通过这个获取this.refs.usernameref可以获取到应用的真实dom

<input style={{width:300}}ref={"text"}/>
{/*非常推荐*/}
<Button style={{backgroundColor:'#2ba471', border:"none"}} size={"large"} type={"primary"}onClick={ ()=>{this.handlerClick() // 非常推荐,传参数
} }>add</Button>

获取input的值

handlerClick = ()=>{console.log("Click4", this.refs.text.value)}

实现效果

在这里插入图片描述

7.2 给组件设置ref=“username”

通过这个获取this.refs.usernameref可以获取到组件对象

7.3 新写法

 myRef = React.createRef();<input style={{width:300}}ref={this.myRef}/>
{/*非常推荐*/}
<Button style={{backgroundColor:'#2ba471', border:"none"}} size={"large"} type={"primary"}onClick={ ()=>{this.handlerClick() // 非常推荐,传参数
} }>add</Button>

点击按钮获取input的输入值,主要代码为this.myRef.current.value

handlerClick = ()=>{console.log("Click4", this.myRef.current.value)}

效果展示
在这里插入图片描述

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

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

相关文章

毕业了!给学计算机朋友的 10 条血泪建议

大家好&#xff0c;我是程序员鱼皮。最近高考结束了&#xff0c;也有很多同学毕业了&#xff0c;首先祝福这些朋友在人生的新阶段一帆风顺。 刚参加完高考的朋友&#xff0c;面临的最大问题就是选专业&#xff0c;这段时间也有一些家长向我咨询&#xff1a;还能不能选计算机啦…

人脸匹配——OpenCV

人脸匹配 导入所需的库加载dlib的人脸识别模型和面部检测器读取图片并转换为灰度图比较两张人脸选择图片并显示结果比较图片创建GUI界面运行GUI主循环运行显示全部代码 导入所需的库 cv2&#xff1a;OpenCV库&#xff0c;用于图像处理。 dlib&#xff1a;一个机器学习库&#x…

基于深度学习视觉算法的多模型文件融合检测系统设计与实现及优化(工人姿态检测+安全帽佩戴检测系统)

1&#xff0c;融合pose.pt(姿态检测)(安全帽佩戴检测)效果图 实时检测优化后FPS可达20 2,原理介绍 YOLOv5是目前应用广泛的目标检测算法之一&#xff0c;其主要结构分为两个部分&#xff1a;骨干网络和检测头。 输入&#xff08;Input&#xff09;: YOLOv5的输入是一张RGB图像…

定档6.20,创邻科技图数据库先锋版发布会来了!

6月20日 14:00 &#xff0c;创邻科技将重磅召开 2024 Galaxybase银河图数据库先锋版发布会&#xff0c;戳此预约&#xff01; 书于竹帛&#xff0c;镂于金石&#xff0c;琢于盘盂。历史长河中&#xff0c;数据通过不同形态承载着人类文明&#xff0c;人们在数千年中始终保持着…

使用Python和Matplotlib绘制复杂数学函数图像

本文介绍了如何使用Python编程语言和Matplotlib库来绘制复杂的数学函数图像。通过引入NumPy库的数学函数,我们可以处理包括指数函数在内的各种复杂表达式。本文详细讲解了如何设置中文字体以确保在图像中正确显示中文标题和标签,并提供了一个完整的代码示例,用户可以通过输入…

找不到xinput1_3.dll文件要怎么修复?有哪些有效修复xinput1_3.dll文件的方法

要解决xinput1_3.dll文件缺失的问题&#xff0c;首先我们需要对这个文件有所了解。理解了这个文件的性质和作用后&#xff0c;才能更科学、有效地解决因其丢失而导致的问题。那么接下来&#xff0c;让我们不浪费时间&#xff0c;直接深入研究如何修复xinput1_3.dll文件的最佳方…

震坤行亮相2024成都工博会,赋能产业新发

为期3天的成都工博会于2024年4月23日在成都国际会展中心完美落幕。震坤行再次紧跟西部智能制造产业发展步伐&#xff0c;亮相现场&#xff0c;实力“圈粉”&#xff0c;为西部地区的制造企业带来打造了一场工业互联网盛宴。 本届成都工博会成功举办&#xff0c;展会聚集了各个国…

在ubuntu中恢复误删除的文件

1、安装 TestDisk 在 Ubuntu 上&#xff0c;可以使用以下命令安装 TestDisk&#xff1a; sudo apt-get install testdisk2、查询你删除的文件所在那个分区 #查询分区 df -h #我这里是/dev/sda2 #也可以使用下面命令查看具体哪个分区 lsblk3、查询该分区是什么系统类型 sudo …

java:【@ComponentScan】和【@SpringBootApplication】扫包范围的冲突

# 代码结构如下&#xff1a; 注意【com.chz.myBean.branch】和【com.chz.myBean.main】这两个包是没有生重叠的。 主程序【MyBeanTest1、MyBeanTest2、MyBeanTest3】这两个类是在包【com.chz.myBean.main】下 # 示例代码 【pom.xml】 org.springframework.boot spring-boot-…

java采集微信公众号数据

需求背景: 最新需要调用微信公众号api 去微信公众号采集 发布文章数据。 &#xff08;本片文章的意义&#xff1a;根据自己开发的方案来提供思路&#xff0c;当然那不会提供代码。代码是最没有 含金量的东西。&#xff09; 1:遇到的坑:首先 想到的是调用 https://api.weixin…

科技项目验收测试必须进行吗?软件测试公司推荐

科技项目验收测试是指在科技项目开发周期中&#xff0c;对项目完成后进行的一种测试和评估工作。它的目的是验证项目是否达到预期的要求&#xff0c;并确保项目交付给客户前达到预期的质量标准。 一、科技项目验收测试的必要性   科技项目验收测试是项目管理中不可或缺的一个…

Maven认识与学习

1. Maven介绍 1.2 初识Maven 1.2.1 什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;Maven – Welcome to Apache Maven Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受…

Linux C语言:变量的作用域和生命周期(auto、register、static和extern)

一、变量存储类型-auto 1、auto变量的说明 变量在程序中使用时,必须预先说明它们的存储类型和数据类型。 变量说明的一般形式是&#xff1a; <存储类型> <数据类型 > <变量名> &#xff1b; <存储类型>是关键词auto、register、static和extern<…

湘江早报专访惟客数据李柯辰:湖南伢子返湘玩转“AI+金融”

来源 |《湘江早报》 记者 | 黄荣佳 ​ 随着数字化浪潮的到来&#xff0c;AI的风吹遍了各行各业&#xff0c;金融作为对新兴技术最敏感的行业&#xff0c;前沿技术的赋能&#xff0c;让金融科技成为行业发展的“新赛点”。作为一家以大数据和AI人工智能技术驱动的新一代数字化…

多源最短路径算法 -- 弗洛伊德(Floyd)算法

1. 简介 Floyd算法&#xff0c;全名为Floyd-Warshall算法&#xff0c;亦称弗洛伊德算法或佛洛依德算法&#xff0c;是一种用于寻找给定加权图中所有顶点对之间的最短路径的算法。这种算法以1978年图灵奖获得者、斯坦福大学计算机科学系教授罗伯特弗洛伊德的名字命名。 2. 核心思…

加码多肤色影像技术 这是传音找到的“出海利器“?

全球化时代&#xff0c;市场竞争愈演愈烈&#xff0c;产品差异化已然成为了企业脱颖而出的关键。在黄、白肤色长期占据人像摄影主赛道的背景下&#xff0c;传音就凭借独一无二的多肤色影像技术走出非洲&#xff0c;走向了更广阔的新兴市场。 聚焦深肤色人群拍照痛点&#xff0c…

怎么把flv转换成mp4格式?介绍一下将flv转成MP4的几种方法

怎么把flv转换成mp4格式&#xff1f;flv和MP4是两种常见的视频格式&#xff0c;它们在网络媒体和数字内容中都扮演着重要的角色。flv格式通常与在线视频播放和流媒体服务相关联&#xff0c;而MP4格式则更广泛地支持于各种设备和平台。然而&#xff0c;在某些情况下&#xff0c;…

(四)React组件、useState、组件样式

1. 组件 1.1 组件是什么 概念&#xff1a;一个组件就是用户界面的一部分&#xff0c;它可以有自己的逻辑和外观&#xff0c;组件之间可以相互嵌套&#xff0c;也可以复用多次。 组件化开发可以让开发者像搭积木一样构建一个完整的庞大应用 1.2 React组件 在React中&#xf…

SECS/GEM 底层协议解析

SECS是什么&#xff1f; SEMI电子半导体联盟,为实现设备与工厂系统的快速对接数据,状态,配方,程序的标准化协议,SECS具有多个版本,本文主要介绍E5协议 HSMS通信方式,设备端的处理流程(Passive模式)。 SECS关键字 Host 主机一般指向工厂控制系统EQP 单机设备Active 在Tcp通信…

Oracle 打开钱包 ORA-28368: cannot auto-create wallet

ORA-28368: cannot auto-create wallet 开启钱包抱错&#xff0c;看下钱包信息 SQL> select * from v$encryption_wallet;WRL_TYPE -------------------- WRL_PARAMETER -------------------------------------------------------------------------------- STATUS ------…