React中ref的使用方法

　　在react典型的数据流中，

props

传递是父子组件交互的唯一方式；通过传递一个新的

props

值来使子组件重新

re-render

,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是

ref

方式。

1.ref有两种使用方法：

1）回调函数

标签中：

<input type="text" className="form-control" ref={ref => this.name = ref}/>

使用：

let name=this.name.value;

2）字符串

标签中：

<input type="text" className="form-control" ref="name"/>

使用：

let name=this.refs.name.value;

2.三种触发回调函数的时机：

1）组件被渲染后

2）组件被卸载后

3）ref改变后

3.注：

　　使用ref必须用在【类型式的组件】才起作用，用在【函数式的组件】是无效的。

更多专业前端知识，请上【猿2048】www.mk2048.com

React中ref的使用方法相关推荐

React中ref的使用方法和使用场景（详解）
摘要不管在Vue中还是React,如果我们想使用一个元素的DOM,不需要通过JS中操纵DOM的方法,它们提供了一个专属的API就是ref. 而Vue中的ref可能比较简单,这一篇主要讲一下如何在Re ...
react 子组件ref_React中Ref 的使用方法详解
本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯 ...
react中ref、createRef、React.forwardRef分别是什么？如何使用？
一.react中ref.createRef.React.forwardRef (1)Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但 ...
React中MUI初始化和方法调用
React中MUI初始化和方法调用 step1:引用 npm install @mui/material @emotion/react @emotion/styled step2:D:\vue\unt ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...
react中ref已废弃，请使用React.createRef()
在项目开发过程中难免会从操作dom,在react中获取dom的方式 (1)ref(已废弃) //绑定ref <input ref="getInput"/> //获取do ...
React中ref的理解
(1)React的ref有3种用法: 字符串 dom节点上使用,通过this.refs[refName]来引用真实的dom节点 <input ref="inputRef" / ...
react中ref使用方法解析
文章目录什么是ref string类型 createRef创建写法一: 写法二: 什么是ref 组件不是真实的DOM节点,在react开发中,官方也不建议直接去操作原生的DOM.组件的DOM节点是 ...
【React学习】React中ref的用法
ref可以让react方便快捷地拿到DOM元素,ref的用法主要有两种. 用法1:回调形式的ref 在ref中传入一个回调函数,回调函数的默认参数就是元素对象,给组件加一个属性用来存储元素对象. &l ...

React中ref的使用方法

React中ref的使用方法

React中ref的使用方法相关推荐

最新文章

热门文章