【React 全家桶】React组件（类式）实例对象的三大属性3-Refs

最新推荐文章于 2022-09-18 00:00:00 发布
最新推荐文章于 2022-09-18 00:00:00 发布
阅读量295 收藏
点赞数
分类专栏： React 全家桶 文章标签： react.js javascript 前端 前端框架 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46318413/article/details/122482824
版权

React组件（类式）实例对象的三大属性3-Refs

一、Refs 的理解

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
类似于原生JS中通过 document 访问 DOM 节点。

二、Refs 中三种获取DOM元素节点的方式

1、字符串形式的ref （之后可以会废弃）

1）设置标签的 ref 属性为 string 类型

<input ref="input1" type="text" placeholder="点击按钮提示数据" />

2）在类中就可以通过this.refs.xxx获取元素节点

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_字符串形式的refs（之后可能会废弃）</title>
    <style>
        button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            //展示左侧数据
            showData = () => {
                let { input1 } = this.refs;//这是真实dom
                alert(input1.value)
            }
            //展示右侧输入框数据
            showData1 = () => {
                let { input2 } = this.refs;//这是真实dom
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input onBlur={this.showData1} ref="input2" type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.querySelector('#test'))
    </script>
</body>

</html>

在这里插入图片描述

2、回调形式的ref

1）设置标签的 ref 属性为 回调函数 的类型

<input ref={ele => this.input1 = ele} type="text" placeholder="点击按钮提示数据" />

2）在类中就可以通过this.xxx获取元素节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_回调函数形式的refs</title>
    <style>
        button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            //展示左侧数据
            showData = () => {
                alert(this.input1.value)
            }
            //展示右侧输入框数据
            showData1 = () => {
                alert(this.input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref={ele => this.input1 = ele} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input ref={ele => this.input2 = ele} onBlur={this.showData1} ref="input2" type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.querySelector('#test'))
    </script>
</body>

</html>

在这里插入图片描述
回调函数形式的ref中存在执行次数的问题：

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_回调函数形式的refs</title>
    <style>
        button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            state = { isHot: true }
            showData = () => {
                alert(this.input1.value)
            }
            //ref如果是内敛函数，那该函数在页面更新过程中会执行两次
            changeWeather = () => {
                const { isHot } = this.state;
                this.setState({ isHot: !isHot })
            }
            //class 的绑定函数
            saveInput = (ele) => {
                this.input2 = ele;
                console.log('class',ele)
            }
            render() {
                const { isHot } = this.state;
                return (
                    <div>
                        <h2>今天天气：{isHot ? '炎热' : '凉爽'}</h2>
                        <input ref={(ele) => { this.input1 = ele; console.log('内联',ele) }} type="text" placeholder="点击按钮提示数据" />
                        <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <button onClick={this.changeWeather}>切换天气</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.querySelector('#test'))
    </script>
</body>

</html>

在这里插入图片描述

3、createRef

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点。
该容器“专人专用”，一个标签只对应一个容器，多个标签则需新建多个容器。

1）通过 React.createRef 创建容器

myRef = React.createRef();

2）标签内通过this.xxx给 ref 赋值

<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>createRef</title>
    <style>
        button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            /*
                React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
                该容器“专人专用”，一个标签只对应一个容器，多个标签则需新建多个容器
            */
            myRef = React.createRef();
            myRef1 = React.createRef();
            //展示左侧数据
            showData = () => {
                alert(this.myRef.current.value)
            }
            //展示右侧输入框数据
            showData1 = () => {
                alert(this.myRef1.current.value)
            }
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧的数据</button>
                        <input ref={this.myRef1} onBlur={this.showData1} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.querySelector('#test'))
    </script>
</body>

</html>

在这里插入图片描述
三种方式中string的方式最简单，但是存在一些问题，不过继续使用也不会有太大问题。

以上就是React组件（类式）实例对象的三大属性3-Refs的内容，请大家关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。

@Dai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react 创建单例组件的方法
08-27
主要介绍了react 创建单例组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React组件refs的使用详解
08-28
React 组件 refs 的使用详解 React 组件 refs 的使用详解可以分为以下几个方面： 1. Ref 的概念：Ref 是 React 中的一个特殊属性，可以被看作是一个组件的参考，也可以说是一个标识。其属性值可以是一个字符串也...
react组件实例对象的三大核心（state,props,refs）
weixin_58632808的博客
04-21 543
组件实例对象的三大核心 一、state class Weather extends React.Component { constructor(props) { super(props); // 解决demo中this指向问题 this.test = this.this.demo.bind(this); } state = { isHort: true }; render() { const { isHort } = this.state; retu
react 之 state 对象
weixin_34167043的博客
06-28 293
首先，在 react 中，通过类来构建 react 组件时，可以在类的构造函数 constructor 中可以使用 react 的属性 state，属性 state 是一个对象，在对象中可以定义组件需要的属性和属性值，比如下面的例子: import React from "react"; import reactDom from "react-dom"; class App extends Rea...
【React 全家桶】React组件（类式）实例对象的三大属性2-props
Dai的博客
01-13 536
【React 全家桶】React组件（类式）实例对象的三大属性2-props
React常规篇:react给对象动态添加属性(TS语法)
YanHSama的博客
10-23 5869
元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "{}"。 在类型 "{}" 上找不到具有类型为 "string" 的参数的索引签名。ts(7053)
React中的refs的使用教程
08-27
React中的refs使用教程 React中的refs是指在React组件中使用的一种特殊属性，可以用来绑定到render()输出的任何组件上去。...refs属性是React中的一种非常有用的属性，可以帮助我们更方便地获取和操作组件实例。
React Refs
12-13
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的...
React创建组件的三种方式及其区别
08-31
无状态组件不使用`this`关键字，无法访问组件实例的方法和属性，如`this.state`或`this.refs`。它们也没有生命周期方法，意味着无法在特定组件生命周期阶段执行操作。由于这些限制，无状态组件适用于只依赖props且不...
ReactJS学习笔记(一)-深入理解ReactJS的面向组件即对象
S1ow
03-29 5336
生活还是美好的，正如天气与海。 前端技术这么火爆，咱也来凑凑热闹呗，学习学习ReactJS，今天就来深入了解下这个超强悍的美少女战士吧！前期的开发环境准备、什么万能的HelloWord咱就不在这里啰嗦了，免得各位看官烦多么不值得。一、ReactJS的简介 ReactJS到底什么鬼？ 大体可以概括为：虚拟DOM（Virtual DOM）和组件化。这当然不是我总结的，但是这两点随着这篇博文，你就完全可以
reactive-property:在对象中定义React性属性
07-04
React性 在 JavaScript 对象中定义响应式属性。 React性属性在更改时通知。 用法 function Person ( ) { } //DEFINE: //You can define your property in prototype. You can also define it on the instance of object. //First parameter is default value, second - optional value validator MyClass . prototype . name = reactiveProperty ( "unnamed" , function ( value ) { return typeof value === "string" ; } var person = new Person ; /
react.js 获取真实的DOM节点实例(必看)
11-26
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <input type="text" ref="myTextInput" /> <input type="button" value="Focus t
【React 全家桶】React组件（类式）实例对象的三大属性1-state
Dai的博客
01-13 397
【React 全家桶】React组件（类式）实例对象的三大属性1-state
React对象表现形式以及其它特性
往前的娘娘
05-31 806
1.html标签对象表现形式。 //形式1const e = ( hello world ); //形式2 const r = React.createElement( 'h1', {className:'dd'}, 'hello world' ); //形式3 const element = { type: 'h1', props: { cla
五、react 组件对象的生命周期
快乐de馒头
12-28 131
1、理解 组件对象从创建到死亡它会经历特定的生命周期阶段 React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作 2、生命周期流程图 3、生命周期详述 组件的三个生命周期状态: * Mount：插入真实 DOM * Update：被重新渲染 * Unmount：...
【React】react学习笔记03-React组件对象的三大属性-状态【state】
the_fool_的博客
09-27 208
今天晚上学习了React中state的使用，特做此记录，对于学习的方式，博主仍然推荐直接复制完整代码，对着注释观察现象！： 作用：组件内部数据交互的容器对象！ 上文中，我列举了两种React自定义组件的声明，这里我拿方式二进行举例： // 方式二：（复杂组件）类组件【ES6】，这是一个基本的类组件 class Component extends React.Co...
【React】react学习笔记04-React组件对象的三大属性-属性值【props】
the_fool_的博客
09-27 443
定义 用于接收上层组件传入的参数的对象！ DEMO 这里是一个简单的传值到组件内部的demo： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> </head> &...
React基础-JSX动态绑定属性的方式
热门推荐
m0_71485750的博客
09-18 1万+
某些元素可能需要绑定class, 绑定class属性的方式是很多的, 这里暂时讲两种方式, 还有第三种方式是通过第三方库进行绑定, 在后续的文章中会进行讲解。注意: 在React中绑定class属性, 直接写class属性React虽然可以识别, 但是会报一个警告, 最好使用。比如元素都会有title属性。比如img元素会有src属性。比如a元素会有href属性。动态添加内联样式style。
React中获取元素(ref获取方式)
weixin_48601618的博客
04-11 4556
受控组件 在react中,input标签的部分属性受到react控制,如onChange是基于input 和change 事件进行封装 非受控组件 对于没有经历过封装的一些属性或者方法,可以通过ref去获取这个dom元素,再去获取或触发其自身的属性和方法(这点的话和Vue是一样的) 获取方式 在react的constructor生命周期内,使用React.createRef()进行绑定,即可获取到对应的dom元素 import React from 'react'; class Test extends R
react结合ts在类组件中实现refs
最新发布
06-02
在 React 中，可以通过 Refs 访问组件的 DOM 节点或类组件的实例。在 TypeScript 中，我们可以在类组件中使用 Refs 来获取组件实例，具体实现可以参考以下代码： ```tsx import React, { RefObject } from 'react';...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值