ref的三种使用方式

ref使用的三种方式之方式一： out (已废弃)

1）第1步：<input ref="item" type="text" /> ref后面跟一个字符串
2）第2步：this.refs.item.value  获取输入框中的数据

ref使用的三种方式之方式二：

ref后面跟上一个回调函数，回调函数的参数就是当前的DOM元素
<input ref={(input)=>{this.xxx = input; // 当前的DOM元素挂载到当前组件对象的xxx属性上面的
}} type="text" />
获取DOM元素：this.input.value

ref使用的三种方式之方式三：

1）this.ref1 = React.createRef(); // ref1是一个私有属性
2）<input ref={this.ref1} type="text" />
3）this.ref1.current.value  获取DOM元素中的内容

上面的ref的三种使用方式，都是用在html标签上面的，当前ref也可以用在组件上，
如果用在组件上，可以获取组件对象。如果用在标签上，可以获取DOM元素。

ref的三种使用方式相关推荐

react的ref三种使用方式，获取元素内容
react的ref三种使用方式,获取元素内容. 注意:应尽可能少的使用ref,优先使用state 1.字符串 refGetData1=()=>{alert("获取到的内容:" ...
spring入门之Spring 常用的三种注入方式
Spring 常用的三种注入方式 Spring 通过 DI(依赖注入)实现 IOC(控制反转),常用的注入方式主要有三种:构造方法注入,set 方法注入,基于注解的注入. 一.通过构造方法注入先简单 ...
Spring 依赖注入的理解及三种注入方式
Spring 依赖注入概念和三种注入方式(理解及应用) 什么是注入要了解Spring的三种注入方式首先前提是得先了解一下什么是注入,相信很多人对这个概念都是模糊不清的,网上的解释是这样的: 依赖注入 ...
vue父子组件的三种传值方式
vue父子组件的三种传值方式函数类型的props传值 //父组件 <template><Children :getChildName="getChildName" ...
Spring AOP的三种实现方式
目录一.什么是AOP 二.Spring AOP的三种实现方式 1.通过Spring API实现AOP (1)编写业务接口和实现类 (2)编写增强类,并实现Spring API相关接口的方法 (3)在 ...
Hive metastore三种配置方式
Hive的meta数据支持以下三种存储方式,其中两种属于本地存储,一种为远端存储.远端存储比较适合生产环境.Hive官方wiki详细介绍了这三种方式,链接为:Hive Metastore. 一.本地d ...
python数据结构与算法：二叉树及三种遍历方式（先序遍历/中序遍历/后序遍历）
树的实现采用queue的形式: 树的三种遍历方式(广度优先白能力法):先序遍历(根左右),中序遍历(左根右)以及后序遍历(左右根) ######################P6.4 数据结构### ...
FPGA之道（41）HDL的三种描述方式
文章目录前言三种描述方式结构化描述方式数据流描述方式行为级描述方式前言常编写Verilog代码的就会知道,我们对于某一功能的描述,可以通过门电路来描述,也可以直接描述其功能等,这就牵扯到 ...
【 Verilog HDL 】HDL的三种描述方式
当我们使用HDL代码描述硬件功能的时候,主要有三种基本描述方式,即结构化描述方式.数据流描述方式和行为级描述方式.通过本次总结,我们将明白到底我们描述的电路是什么方式描述的. 结构化描述方式结构化描 ...

ref的三种使用方式

ref的三种使用方式

ref使用的三种方式之方式一： out (已废弃)

ref使用的三种方式之方式二：

ref使用的三种方式之方式三：

ref的三种使用方式相关推荐

最新文章

热门文章