当前位置: 首页 > news >正文

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用法。&#xff08;由于效率问题&#xff0c;现在官方不推荐使用这种写法。&#xff09; 1.dom节点上使用&#xff0c;通过this.refs.xxxx来引用真实的dom节点 <input ref&q…...

v4l2-ioctl.c的一些学习和整理

可以发现&#xff0c;这个宏用的很好&#xff0c;简洁易扩展&#xff0c;自己写代码可以学习下 #define IOCTL_INFO(_ioctl, _func, _debug, _flags) \[_IOC_NR(_ioctl)] { \.ioctl _ioctl, \.flags _flags, \.name #_ioctl, \.func _func, \.debug _…...

Python实战小项目分享

Python实战小项目包括网络爬虫、数据分析和可视化、文本处理、图像处理、聊天机器人、任务管理工具、游戏开发和网络服务器等。这些项目提供了实际应用场景和问题解决思路&#xff0c;可以选择感兴趣的项目进行实践&#xff0c;加深对Python编程的理解和掌握。在实践过程中&…...

使用Dockerfile生成docker镜像和容器的方法记录

一、相关介绍 Docker 是一个开源的容器化平台&#xff0c;其中的主要概念是容器和镜像。 容器是 Docker 的运行实例。 它是一个独立并可执行的软件包&#xff0c;包含了应用程序及其依赖的所有组件&#xff08;如代码、运行时环境、系统工具、库文件等&#xff09;。容器可以在…...

美国亚马逊UL60335认证怎么办理,费用是多少

UL60335认证是由美国安全实验室&#xff08;UnderwritersLaboratories&#xff09;颁发的&#xff0c;它对各类家用电器进行严格的测试和认证&#xff0c;确保其在正常使用情况下不会给消费者带来任何伤害。 本文将从不同的角度来叙述亚马逊UL60335认证的重要性和成败因素。 1.…...

前端开发规范总结

1、 前言 前端开发中&#xff0c;不同的开发者有不同的代码编写习惯&#xff0c;但实际项目中有的公司是需要协同开发的&#xff0c;想要高效的协同&#xff0c;规定一个大家都能接受的规范就尤为重要。 坚持好的代码风格规范&#xff0c;从你我做起。 2、代码规范的好处 …...

前端react入门day01-了解react和JSX基础

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 React介绍 React是什么 React的优势 React的市场情况 开发环境搭建 使用create-react-app快速搭建…...

浅析 C# Console 控制台为什么也会卡死

一&#xff1a;背景 1. 讲故事 在分析旅程中&#xff0c;总会有几例控制台的意外卡死导致的生产事故&#xff0c;有经验的朋友都知道&#xff0c;控制台卡死一般是动了 快速编辑窗口 的缘故&#xff0c;截图如下&#xff1a; 虽然知道缘由&#xff0c;但一直没有时间探究底层…...

zookeeper详解

一 zookeeper介绍 首先需要了解zookeeper是什么&#xff0c;zookeeper是一个分布式协调服务。所谓分布式协调主要是来解决分布式系统中多个进程之间的同步限制&#xff0c;防止出现脏读&#xff0c;例如我们常说的分布式锁。 zookeeper中的数据是存储在内存当中的&#xff0c;因…...

达索智能制造解决方案,敏捷电芯制造如何赋能企业竞争力 | 百世慧®

敏捷电芯制造赋能企业竞争力 全球电池市场正在快速扩大&#xff0c;为制造商带来巨大商机。 锂电行业的智能制造如何应用&#xff1f; 电池制造业的市场趋势是什么&#xff1f; 电池制造商面临哪些挑战&#xff1f; 特别是电池电芯制造方面&#xff0c;如何克服挑战获得竞…...

自然语言处理---迁移学习实践

1 微调脚本介绍 指定任务类型的微调脚本: huggingface研究机构提供了针对GLUE数据集合任务类型的微调脚本, 这些微调脚本的核心都是微调模型的最后一个全连接层。通过简单的参数配置来指定GLUE中存在任务类型(如: CoLA对应文本二分类&#xff0c;MRPC对应句子对文本二分类&…...

看得懂的——数据库中的“除”操作

通过一个例子来解释数据库中的“除”操作 R➗S其实就是判断关系R中X各个值的象集Y是否包含关系S中属性Y的所有值 求解步骤 第一步 找出关系R和关系S中相同的属性&#xff0c;即Y属性。在关系S中对Y做投影&#xff08;即将Y列取出&#xff09;&#xff1b;所得结果如下&#x…...

el-input无法输入的问题和表单验证失败问题(亲测有效)-开发bug总结4

大部分无法输入的问题&#xff1a;基本都是没有进行v-model双向数据绑定&#xff0c;这个很好解决。 本人项目中遇到的bug问题如下&#xff1a; 点击添加&#xff0c;表单内可输入用户名 和 用户姓名&#xff0c;但有时会偶发出现无法这两个input框里面无法输入内容。 原因&a…...

OpenCV+QT实现的数字图像处理算法合集

源码下载地址&#xff1a; 基于OpenCV和QT的图像处理源码 图像预处理 灰度处理 灰度直方图 灰度均衡 梯度锐化 Laplace锐化 边缘检测 Roberts Sobel Laplace Prewitt canny Krisch 噪声 椒盐噪声 高斯噪声 滤波 均值滤波 中值滤波 双边滤波 形态学滤波 高斯滤波 图像变…...

想要查看员工与客户聊天记录和跟进情况,有什么工具推荐吗?

想要查看员工与客户 聊天记录和跟进情况 有什么工具推荐吗&#xff1f; 想要查看员工与客户聊天记录和每天新增客户&#xff0c;可以使用微信管理系统这个工具。 微信管理系统是一个能够同时登录多个微信&#xff0c;实现一个人管理多个微信的工具。它分为两大版块&#xff0c;…...

androdi知识笔记

jbr embed&#xff1a;android studio自带的jdk AGP(android gradle plugin) aar jar 利用java语言可以写应用程序&#xff08;利用已有库加速开发过程&#xff09;&#xff0c;也可以自己开发库用于特定功能&#xff08;供引用&#xff09;。 循环啊是个&#xff0…...

华为数通方向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,…...

数据要素安全流通:挑战与解决方案

文章目录 数据要素安全流通&#xff1a;挑战与解决方案一、引言二、数据要素安全流通的挑战数据泄露风险数据隐私保护数据跨境流动监管 三、解决方案加强数据安全防护措施实施数据隐私保护技术建立合规的数据跨境流动机制 四、数据安全流通的未来趋势01 数据价值与产业崛起02 多…...

【Mybatis源码】XMLConfigBuilder构建器 - 加载XML与创建Configuration对象的过程

XMLConfigBuilder是Mybatis中定义的进行构建Configuration对象的类,此类用于读取XML配置文件创建并初始化Configuration对象;本篇我们主要介绍加载XML文件与创建Configuration对象的过程。 一、Configuration对象的创建过程 下面是从Configuration类中取到的代码片段: pu…...

台灯显色指数多少好?推荐显色指数优秀的护眼台灯

台灯的显色指数是其非常重要的指标&#xff0c;它可以表示灯光照射到物体身上&#xff0c;物体颜色的真实程度&#xff0c;一般用平均显色指数Ra来表示&#xff0c;Ra值越高&#xff0c;灯光显色能力越强。常见的台灯显色指数最低要求一般是在Ra80以上即可&#xff0c;比较好的…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

js 设置3秒后执行

如何在JavaScript中延迟3秒执行操作 在JavaScript中&#xff0c;要设置一个操作在指定延迟后&#xff08;例如3秒&#xff09;执行&#xff0c;可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法&#xff0c;它接受两个参数&#xff1a; 要执行的函数&…...

Redis上篇--知识点总结

Redis上篇–解析 本文大部分知识整理自网上&#xff0c;在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库&#xff0c;Redis 的键值对中的 key 就是字符串对象&#xff0c;而 val…...