react 中ref 属性的三种写法

目录
1. 字符串 ref
2.dom节点上使用回调函数ref
3.React.createRef()
1. 字符串 ref
最早的ref用法。(由于效率问题,现在官方不推荐使用这种写法。)
1.dom节点上使用,通过this.refs.xxxx来引用真实的dom节点
<input ref="input1" type="text"/>
代码示例:
class test extends React.Component{constructor(props) {super(props);}showData = ()=>{const x = this.refsalert(x.value)}render() {return (<div><input ref="input1" type="text"/><button onClick={this.showData}> 点我</button></div>)}
}

2.dom节点上使用回调函数ref
<input ref={(currentNode) => {this.textInput = currentNode;}} type="text" />简写:
<input ref={currentNode => this.textInput = currentNode } type="text" />
其中的currentNode节点是,下图:

代码示例:
class test extends React.Component{constructor(props) {super(props);}showData = ()=>{const {input1} = thisalert(input1.value)}saveInput =(currentNode)=>{this.input1 = currentNode}render() {return (<div><input ref={(currentNode)=>{this.input1 = currentNode}} type="text"/>//简写<input ref={currentNode => this.input1 = currentNode} type="text"/><input ref={this.saveInput} type="text"/><button onClick={this.showData}> 点我</button></div>)}
}
3.React.createRef()
在React 16.3版本后,使用此方法来创建ref。将其赋值给一个变量,通过ref挂载在dom节点或组件上,该ref的current属性 将能拿到dom节点或组件的实例
注意:React.createRef调用后可以返回一个容器,该容器可以存储被ref 所标识的节点但是该容器是转人专用,一次只能存一个
myRef = React.createRef()
代码示例:
class test extends React.Component{//React.createRef调用后可以返回一个容器,该容器可以存储被ref 所标识的节点myRef = React.createRef()constructor(props) {super(props);}showData = ()=>{alert(this.myRef.current.value)}saveInput =(currentNode)=>{this.input1 = currentNode}render() {return (<div><input ref={this.myRef} type="text"/>{/*<input ref={(currentNode)=>{this.input1 = currentNode}} type="text"/>*/}{/*//简写*/}{/*<input ref={currentNode => this.input1 = currentNode} type="text"/>*/}{/*<input ref={this.saveInput} type="text"/>*/}<button onClick={this.showData}> 点我</button></div>)}
}
拓展:如何获取多个input输入框中的值?
第一种:
import React,{ Component } from 'react';
class ReplenishData extends Component{constructor(props){super(props);this.state = {}}showVal(name,e){this.setState({[name]:e.target.value});}render(){console.log(this.state);return(<div><input type="text" onChange= {this.showVal.bind(this,"name1")} /><input type="text" onChange={this.showVal.bind(this,"name2")} /><input type="text" onChange={this.showVal.bind(this,"name3")} /><input type="text" onChange={this.showVal.bind(this,"name4")} /><input type="text" onChange={this.showVal.bind(this,"name5")} /><input type="text" onChange={this.showVal.bind(this,"name6")} /></div>)}
}
相关文章:
react 中ref 属性的三种写法
目录 1. 字符串 ref 2.dom节点上使用回调函数ref 3.React.createRef() 1. 字符串 ref 最早的ref用法。(由于效率问题,现在官方不推荐使用这种写法。) 1.dom节点上使用,通过this.refs.xxxx来引用真实的dom节点 <input ref&q…...
v4l2-ioctl.c的一些学习和整理
可以发现,这个宏用的很好,简洁易扩展,自己写代码可以学习下 #define IOCTL_INFO(_ioctl, _func, _debug, _flags) \[_IOC_NR(_ioctl)] { \.ioctl _ioctl, \.flags _flags, \.name #_ioctl, \.func _func, \.debug _…...
Python实战小项目分享
Python实战小项目包括网络爬虫、数据分析和可视化、文本处理、图像处理、聊天机器人、任务管理工具、游戏开发和网络服务器等。这些项目提供了实际应用场景和问题解决思路,可以选择感兴趣的项目进行实践,加深对Python编程的理解和掌握。在实践过程中&…...
使用Dockerfile生成docker镜像和容器的方法记录
一、相关介绍 Docker 是一个开源的容器化平台,其中的主要概念是容器和镜像。 容器是 Docker 的运行实例。 它是一个独立并可执行的软件包,包含了应用程序及其依赖的所有组件(如代码、运行时环境、系统工具、库文件等)。容器可以在…...
美国亚马逊UL60335认证怎么办理,费用是多少
UL60335认证是由美国安全实验室(UnderwritersLaboratories)颁发的,它对各类家用电器进行严格的测试和认证,确保其在正常使用情况下不会给消费者带来任何伤害。 本文将从不同的角度来叙述亚马逊UL60335认证的重要性和成败因素。 1.…...
前端开发规范总结
1、 前言 前端开发中,不同的开发者有不同的代码编写习惯,但实际项目中有的公司是需要协同开发的,想要高效的协同,规定一个大家都能接受的规范就尤为重要。 坚持好的代码风格规范,从你我做起。 2、代码规范的好处 …...
前端react入门day01-了解react和JSX基础
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React介绍 React是什么 React的优势 React的市场情况 开发环境搭建 使用create-react-app快速搭建…...
浅析 C# Console 控制台为什么也会卡死
一:背景 1. 讲故事 在分析旅程中,总会有几例控制台的意外卡死导致的生产事故,有经验的朋友都知道,控制台卡死一般是动了 快速编辑窗口 的缘故,截图如下: 虽然知道缘由,但一直没有时间探究底层…...
zookeeper详解
一 zookeeper介绍 首先需要了解zookeeper是什么,zookeeper是一个分布式协调服务。所谓分布式协调主要是来解决分布式系统中多个进程之间的同步限制,防止出现脏读,例如我们常说的分布式锁。 zookeeper中的数据是存储在内存当中的,因…...
达索智能制造解决方案,敏捷电芯制造如何赋能企业竞争力 | 百世慧®
敏捷电芯制造赋能企业竞争力 全球电池市场正在快速扩大,为制造商带来巨大商机。 锂电行业的智能制造如何应用? 电池制造业的市场趋势是什么? 电池制造商面临哪些挑战? 特别是电池电芯制造方面,如何克服挑战获得竞…...
自然语言处理---迁移学习实践
1 微调脚本介绍 指定任务类型的微调脚本: huggingface研究机构提供了针对GLUE数据集合任务类型的微调脚本, 这些微调脚本的核心都是微调模型的最后一个全连接层。通过简单的参数配置来指定GLUE中存在任务类型(如: CoLA对应文本二分类,MRPC对应句子对文本二分类&…...
看得懂的——数据库中的“除”操作
通过一个例子来解释数据库中的“除”操作 R➗S其实就是判断关系R中X各个值的象集Y是否包含关系S中属性Y的所有值 求解步骤 第一步 找出关系R和关系S中相同的属性,即Y属性。在关系S中对Y做投影(即将Y列取出);所得结果如下&#x…...
el-input无法输入的问题和表单验证失败问题(亲测有效)-开发bug总结4
大部分无法输入的问题:基本都是没有进行v-model双向数据绑定,这个很好解决。 本人项目中遇到的bug问题如下: 点击添加,表单内可输入用户名 和 用户姓名,但有时会偶发出现无法这两个input框里面无法输入内容。 原因&a…...
OpenCV+QT实现的数字图像处理算法合集
源码下载地址: 基于OpenCV和QT的图像处理源码 图像预处理 灰度处理 灰度直方图 灰度均衡 梯度锐化 Laplace锐化 边缘检测 Roberts Sobel Laplace Prewitt canny Krisch 噪声 椒盐噪声 高斯噪声 滤波 均值滤波 中值滤波 双边滤波 形态学滤波 高斯滤波 图像变…...
想要查看员工与客户聊天记录和跟进情况,有什么工具推荐吗?
想要查看员工与客户 聊天记录和跟进情况 有什么工具推荐吗? 想要查看员工与客户聊天记录和每天新增客户,可以使用微信管理系统这个工具。 微信管理系统是一个能够同时登录多个微信,实现一个人管理多个微信的工具。它分为两大版块,…...
androdi知识笔记
jbr embed:android studio自带的jdk AGP(android gradle plugin) aar jar 利用java语言可以写应用程序(利用已有库加速开发过程),也可以自己开发库用于特定功能(供引用)。 循环啊是个࿰…...
华为数通方向HCIP-DataCom H12-831题库(多选题:21-40)
第21题 网络管理员A希望使用ACL匹配特定的路由条目,请问以下哪些路由条目将被图中的ACL规侧匹配? acl number 2000 rule 10 permit source 10.0.0.0 0.0.6.0A、10.0.0.1/32 B、10.0.0.0/24 C、10.0.1.0/24 D、10.0.2.0/24 答案: 解析: 通配符十进制6转换二进制为00000110,…...
数据要素安全流通:挑战与解决方案
文章目录 数据要素安全流通:挑战与解决方案一、引言二、数据要素安全流通的挑战数据泄露风险数据隐私保护数据跨境流动监管 三、解决方案加强数据安全防护措施实施数据隐私保护技术建立合规的数据跨境流动机制 四、数据安全流通的未来趋势01 数据价值与产业崛起02 多…...
【Mybatis源码】XMLConfigBuilder构建器 - 加载XML与创建Configuration对象的过程
XMLConfigBuilder是Mybatis中定义的进行构建Configuration对象的类,此类用于读取XML配置文件创建并初始化Configuration对象;本篇我们主要介绍加载XML文件与创建Configuration对象的过程。 一、Configuration对象的创建过程 下面是从Configuration类中取到的代码片段: pu…...
台灯显色指数多少好?推荐显色指数优秀的护眼台灯
台灯的显色指数是其非常重要的指标,它可以表示灯光照射到物体身上,物体颜色的真实程度,一般用平均显色指数Ra来表示,Ra值越高,灯光显色能力越强。常见的台灯显色指数最低要求一般是在Ra80以上即可,比较好的…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
