在React中使用React.createRef:更优雅的DOM引用方式

在React中使用React.createRef:更优雅的DOM引用方式

React提供了多种方式来引用DOM元素,其中React.createRef()是一种更为现代、更优雅的方式。在这篇博客中,我们将深入了解React.createRef()的应用,以及它为开发者带来的便利。

什么是React.createRef()?

React.createRef()是React提供的用于创建ref对象的方法。通过它,我们可以在React组件中轻松地引用和操作DOM元素。

class Demo extends React.Component {inputRef1 = React.createRef();inputRef2 = React.createRef();onClick = () => {alert(this.inputRef1.current.value);}onBlur = () => {alert(this.inputRef2.current.value);}render() {return (<div><input ref={this.inputRef1} type="text" placeholder="点击按钮显示输入内容" /> &nbsp;<button onClick={this.onClick}>点击显示左侧输入内容</button> &nbsp;<input ref={this.inputRef2} type="text" onBlur={this.onBlur} placeholder="失去焦点显示输入内容" /></div>);}
}

为何选择React.createRef()?

  1. 清晰简洁: 使用React.createRef()创建的ref对象,使代码更加清晰,易读。

  2. 直接访问: 通过current属性直接访问引用的DOM元素,减少冗余代码。

  3. 适用于复杂场景: 在一些需要动态操作DOM的场景中,React.createRef()表现更为出色。

结语

React.createRef()为React开发者提供了一种更现代、更灵活的DOM引用方式。通过深入理解这一特性,我们能够更好地应用它,提高代码的可读性和可维护性。在项目中选择最适合需求的引用方式,是利用这个前端开发中的强大工具的关键。期待你能在实际项目中充分发挥其优势。

参考

  • 在React中使用React.createRef
  • 完整代码

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

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

相关文章

Vulnhub-FUNBOX: GAOKAO渗透

文章目录 前言1、靶机ip配置2、渗透目标3、渗透概括 开始实战一、信息获取二、爆破FTP服务三、GetShell四、提权 前言 由于在做靶机的时候&#xff0c;涉及到的渗透思路是非常的广泛&#xff0c;所以在写文章的时候都是挑重点来写&#xff0c;尽量的不饶弯路。具体有不不懂都的…

仰暮计划|“他说,他是出生于两个时代的人”

凌保庆老爷爷&#xff0c;1942年10月4日出生&#xff0c;今年82岁&#xff0c;家住在河南省登封市唐庄乡磨沟村。7月28日&#xff0c;我作为仰暮计划小队的一员去拜访了这位老人&#xff0c;听凌爷爷讲述了他的故事。 走进这户人家的时候&#xff0c;凌爷爷正在书房里。虽然家…

Spring第三天

今日目标 能够理解AOP的作用 能够完成AOP的入门案例 能够理解AOP的工作流程 能够说出AOP的五种通知类型 能够完成"测量业务层接口万次执行效率"案例 能够掌握Spring事务配置 一、AOP 1 AOP简介 问题导入 问题1&#xff1a;AOP的作用是什么&#xff1f; 问题2&am…

✨JavaScript 第十一章(深入理解null与undefined)

在JavaScript的世界里&#xff0c;null和undefined是两个表示“没有值”的概念&#xff0c;但它们之间有着微妙的差别。undefined是当一个变量被声明了&#xff0c;但没有被赋值时&#xff0c;它的默认值。这是JavaScript引擎的工作&#xff0c;我们通常不会手动设置一个变量为…

【MySQL实践】一个隐蔽的问题导致 Field ‘xxx‘ doesn‘t have a default value

文章目录 1.背景2.问题处理3.思考与总结 1.背景 最后在公司的后台系统上遇到了一个线上问题&#xff0c;是在插入某个表数据的时候出现了数据库的插入异常&#xff0c;即&#xff1a;java.sql.SQLException: Field xxx doesnt have a default value&#xff0c;这其实是一个比…

javaweb-js-vue基础知识(持续更新中)

sshu 双向数据绑定 ---------------------------------------------------------- 注意淘宝镜像最新网址发生变化&#xff0c;记得改&#xff0c;不是老师现在用的那个&#xff0c;不然会下载出错&#xff01;&#xff01;&#xff01; 没有的&#xff1a;ctrlshiftp&#xff…

apipost和curl收不到服务器响应的HTTP/1.1 404 Not Found

windows的apipost发送请求后&#xff0c;服务器响应了HTTP/1.1 404 Not Found&#xff0c;但是apipost一直显示发送中。 linux上的curl也一样。 使用wireshark抓包发现收到了响应&#xff0c;但是wireshark识别不了&#xff08;图中是回应404后关闭了连接&#xff09;&#xff…

fsx 简介:适用于 JavaScript 的现代文件系统 API

JavaScript 运行时中的文件系统 API 已经很久没有这么好了&#xff0c;这是我试图做出一个更好的文件系统 API 的尝试。 我们今天拥有的 JavaScript API 比十年前要好得多。考虑一下从 XMLHttpRequest 到 fetch() 的转变&#xff1a;开发者体验显著改善&#xff0c;允许我们编…

Chatgpt的崛起之路

Chatgpt的崛起之路 背景与发展历程背景发展历程 技术原理第一阶段&#xff1a;训练监督策略模型第二阶段&#xff1a;训练奖励模型第三阶段&#xff1a;采用强化学习来增强模型的能力。 国内使用情况及应用的领域面临的数据安全挑战与建议ChatGPT获取数据产生的问题数据泄露问题…

@Scheduled笔记240124

Scheduled的参数 常用的Scheduled注解属性&#xff1a; fixedRate属性&#xff1a;根据固定的频率执行任务。 Scheduled(fixedRate 5000) // 每隔5秒执行一次fixedDelay属性&#xff1a;任务完成后&#xff0c;等待一段固定的时间再执行下一次。 Scheduled(fixedDelay 5000…

HJ12 字符串反转【C语言】

【华为机试题 HJ12】字符串反转 描述输入描述:输出描述:示例1参考代码1描述 接受一个只包含小写字母的字符串,然后输出该字符串反转后的字符串。(字符串长度不超过1000) 输入描述: 输入一行,为一个只包含小写字母的字符串。 输出描述: 输出该字符串反转后的字符串…

Unity串口通信教程:基础知识和实践指南

概述 Unity在游戏开发和实时应用中广泛使用。除了图形渲染和游戏逻辑&#xff0c;Unity还能与外部硬件设备进行串口通信。本文将介绍如何在Unity中实现串口通信&#xff0c;包括基础设置、数据读写、数据校验和异或操作。 基础设置 引入命名空间 首先&#xff0c;需要引入Syste…

接口自动化测试:mock server之Moco工具

什么是mock server mock&#xff1a;英文可以翻译为模仿的&#xff0c;mock server是我们用来解除依赖&#xff08;耦合&#xff09;&#xff0c;假装实现的技术&#xff0c;比如说&#xff0c;前端需要使用某些api进行调试&#xff0c;但是服务端并没有开发完成这些api&#…

测试人年终总结:入行三年,下一步怎么走,思想碰撞

原贴地址&#xff1a;入行三年&#xff0c;下一步怎么走&#xff0c;思想碰撞 TesterHome 熟悉环境&#xff0c;进步缓慢&#xff1b;停止思考&#xff0c;举步不前&#xff08;为什么会有这篇文章why 初心变质&#xff1a;计算机系毕业&#xff0c;毕业时的打算是从测试进&a…

程序员如何保持身心健康

程序员要保持身心健康&#xff0c;可以注意以下几个方面&#xff1a; 饮食健康&#xff1a;保持均衡的饮食&#xff0c;多吃蔬菜水果&#xff0c;减少油腻和高热量食物的摄入。同时&#xff0c;适当饮水&#xff0c;避免因长时间坐着工作而导致的脱水。尽量不要吃街边摊、大排…

#常见问题总结#在docker中跑前端vue项目

目录 前言一、no such file or directory, open...总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 记录在docker中跑前端项目过程中&#xff0c;我遇到的问题以及解决方法 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一…

大数据数据可视化工具ECharts,从入门到精通!

介绍&#xff1a;ECharts是一个强大的数据可视化图表库&#xff0c;它基于JavaScript开发&#xff0c;并具有丰富的特性和灵活性。 多平台支持&#xff1a;ECharts可以在PC和移动设备上流畅运行&#xff0c;它对移动端进行了优化&#xff0c;确保在不同设备上都有良好的展示效果…

为什么游戏公司开发一个游戏需要上亿资金

** 为什么游戏公司开发一个游戏需要上亿资金 ** 游戏界有句老话&#xff1a;要做游戏&#xff0c;没上亿准备别来碍手碍脚。说直白点&#xff0c;就是要想在这个竞争激烈的蓝海里立足&#xff0c;开发一款像模像样的游戏&#xff0c;需要有几亿元的资金准备。 可能有人会觉得…

互联网泛人才流动报告:大厂扩张按下暂停键,这家公司逆势给出5w月薪招人

前段时间&#xff0c;脉脉高聘人才智库发布了《2023年互联网泛人才流动报告》&#xff0c;似乎佐证了23年是互联网真正的寒冬…… 卷生卷死&#xff01;5个人竞争2个岗位 2023年&#xff0c;互联网行业的求职难度可以说是地狱级别&#xff0c;人才供需比持续上升&#xff0c;…

什么是Spring

文章目录 什么是Spring什么是 IoC Spring的IoCDI的概念 什么是Spring Spring 是一个包含了众多工具方法的 IoC容器。 什么是 IoC Inversion of Control — 控制反转 在传统的开发中&#xff0c;假设A类依赖于B类&#xff0c;那么创建A对象实例就需要先new一个B类对象&#x…