react（六）-- ref

最新推荐文章于 2024-02-06 15:32:17 发布
最新推荐文章于 2024-02-06 15:32:17 发布
阅读量143 收藏
点赞数 2
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48942526/article/details/120877290
版权
本文详细介绍了React中ref的使用，包括受控组件与非受控组件的区别，以及ref的各种应用场景，如时间组件的更新、表单输入的收集与操作。还涵盖了ref-forward技术在父子组件间的应用和事件绑定技巧。
摘要由CSDN通过智能技术生成

component - ref

  1. 时钟案例
    （1）受控组件
<script type="text/babel">
        //受控组件
    class Clock extends React.Component {
        state = { time : new Date().toLocaleTimeString() }
        render() {
            return (
                <div>
                    <h2>{this.state.time}</h2>
                </div>
            )
        }
        componentDidMount() {
            setInterval(() => {
                this.setState({
                    time : new Date().toLocaleTimeString()
                })
            },1000)
        }
    }
    ReactDOM.render(<Clock />, document.getElementById("app"));
</script>

在这里插入图片描述

         （2）非受控组件1（string）

<script type="text/babel">
    //refs 引用容器
    // 01 找到真实DOM容器
    // this.refs = {}  // 这个对象容器 => 用来存储真实DOM的引用
    class Clock extends React.Component {          
        render() {
            return (
                <div>
                    {/*02 真实DOM放到this.refs={} 容器里
                      通过createElement 创建虚拟DOM,新增ref
                      ReactDOM.render 把虚拟DOM同步 渲染成真实DOM => 判断是否有ref
                      如果有ref：把ref属性对应的真实DOM h2 放进this.refs={}里面；
                      {ref属性对应的值 => key : 真实DOM h2} => {timeRef : 真实DOM h2}
                    */}
                    <h2 ref='timeRef'>{new Date().toLocaleTimeString()}</h2>
                </div>
            )
        }
        componentDidMount() {
            console.log(this.refs);
            setInterval(() => {             
                //03 this.refs={} 容器里获取真实DOM => h2 => 进行操作
                this.refs.timeRef.innerHTML = new Date().toLocaleTimeString()                  
            },1000)
        }
    }
    ReactDOM.render(<Clock />, document.getElementById("app"));
</script>

在这里插入图片描述

思考：

  • 该案例是：实例组件.refs = {key : 真实DOM} key为ref属性对应的值（timeRef）
  • 我们如何做到：实例组件.key = 真实DOM ？

         （3）非受控组件2（function）

<script type="text/babel">     
    class Clock extends React.Component {          
        render() {
            return (
                <div>
                    {/* 
                      通过createElement 创建虚拟DOM,新增ref属性
                      ReactDOM.render 把虚拟DOM同步 渲染成真实DOM => 判断是否有ref
                      如果有ref：判断ref属性对应的值是否为函数=>如果是：执行这个函数，把真实DOM作为参数传进去
                      组件实例.key = 真实DOM（element）
                    */}
                        
                    <h2 ref={e=>this.timeRef=e}>{new Date().toLocaleTimeString()}</h2>
                    <h2 ref={(element)=>{
                        this.timeRef2 = element
                    }}>{new Date().toLocaleTimeString()}</h2>
                </div>
            )
        }
        //组件挂载完毕：第一次渲染完毕 => 虚拟DOM已经完全转化成真实DOM
        componentDidMount() {
            console.log(this);
            console.log(this.refs);
            setInterval(() => {             
                // this.key = 真实DOM  h2 => 进行操作
                this.timeRef.innerHTML = new Date().toLocaleTimeString()   
                this.timeRef2.innerHTML = new Date().toLocaleTimeString()                   
            },1000)
        }
    }
    ReactDOM.render(<Clock />, document.getElementById("app"));
</script>

在这里插入图片描述
         （4）非受控组件3（createRefs）

源码分析：
an immutable object with a single mutable value

	function createRef() {
            var refObject = {
                current: null
            };
            {
                Object.seal(refObject); // 对参数对象进行封闭 不能添加新的属性，只能有一个属性current
            }
            return refObject;
        }

注意：

  • 执行React.createRef() => 返回值{current:null}对象容器，但是这个返回值对象源码没有挂载到组件实例上，所以需要我们手动挂载 this.key = React.createRef()
	<script type="text/babel">
        class Clock extends React.Component {      
            constructor(props){
                super(props)
                this.timeRef = React.createRef() // {current: null}
            }    
            render() {
                return (
                    <div>
                        {/*02 
                          通过createElement 创建虚拟DOM,新增ref属性
                          ReactDOM.render 把虚拟DOM同步 渲染成真实DOM => 判断是否有ref
                          如果有ref：会找到ref对应的值 => {current: null} 容器，把真实DOM h2 赋值给 容器current 属性
                          不需要给引用容器提供 key
                        */}
                        
                        <h2 ref={this.timeRef}>{new Date().toLocaleTimeString()}</h2>
                        
                    </div>
                )
            }
            //组件挂载完毕：第一次渲染完毕 => 虚拟DOM已经完全转化成真实DOM
            componentDidMount() {
                console.log(this);
                console.log(this.timeRef);
                setInterval(() => {             
                    //03 this.key.current = 真实DOM  h2 => 进行操作
                    this.timeRef.current.innerHTML = new Date().toLocaleTimeString()                  
                },1000)
            }
        }
        ReactDOM.render(<Clock />, document.getElementById("app"));
    </script>

在这里插入图片描述

三种方案总结：

  • ref = ‘key’ => this.refs = {} => {key : true DOM}
  • ref = {e=>this.key = e} => this.key = true DOM
  • this.key = React.createRef(); {current:null} = {current : true DOM}
  1. ref-form （form表单收集）
    （1）ref = ‘key’
    <script type="text/babel">
        class Form extends React.Component {      
            handleClick = ()=>{
                console.log(this.refs);
                console.log(this.refs.inputRef);
                console.log(this.refs.inputRef.value);
            }
            render() {
                return (
                    <div>
                        <input type="text" ref='inputRef' />
                        <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Form />, document.getElementById("app"));
    </script>

在这里插入图片描述
         （2）ref = {e=>this.属性 = e}

	<script type="text/babel">
        class Form extends React.Component {      
            handleClick = ()=>{
                console.log(this.inputRef);
                console.log(this.inputRef.value);
            }
            render() {
                return (
                    <div>
                        <input type="text" ref={e=>this.inputRef = e} />
                        <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Form />, document.getElementById("app"));
    </script>

在这里插入图片描述
         （3）ref = {this.属性}

	<script type="text/babel">
        class Form extends React.Component {    
            constructor(){
                super()
                this.inputRef = React.createRef()
            }  
            handleClick = ()=>{
                console.log(this.inputRef);
                console.log(this.inputRef.current);
                console.log(this.inputRef.current.value);
            }
            render() {
                return (
                    <div>
                        <input type="text" ref={this.inputRef} />
                        <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Form />, document.getElementById("app"));
    </script>

在这里插入图片描述
         （4）绑定事件

	<script type="text/babel">
        class Form extends React.Component {    
            handleChange = (e)=>{
                console.log(e.target.value);
            }
            render() {
                return (
                    <div>
                        <input type="text" onChange={this.handleChange} />
                    </div>
                )
            }
        }
        ReactDOM.render(<Form />, document.getElementById("app"));
    </script>

在这里插入图片描述

3.form 案例

  • 失去焦点 => 触发事件 => 弹出input value
<script type="text/babel">
    //失去焦点 => 触发事件 => 弹出input value
    class Form extends React.Component {    
         handleBlur = (e)=>{
            console.log(e.target)
            console.log(e.target.value);
            alert(e.target.value)
         }
         render() {
             return (
                <div>
                    <input type="text" onBlur={this.handleBlur} />
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
         }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));
</script>

在这里插入图片描述

  • 点击 => 触发事件 => 弹出input value
<script type="text/babel">    
        class Form extends React.Component {    
            constructor() {
                super()
                this.inputRef =React.createRef()
            }
            handleClick = ()=>{
                alert(this.inputRef.current.value)
            }
            render() {
                return (
                    <div>
                        <input type="text" ref={this.inputRef} />
                        <button onClick={this.handleClick}>commit</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Form />, document.getElementById("app"));
    </script>

在这里插入图片描述

  • 获取焦点
<script type="text/babel">      
    class Form extends React.Component {    
        constructor() {
            super()
            this.inputRef =React.createRef()
        }
        handleClick = ()=>{
            // 点击按钮获取焦点
            this.inputRef.current.focus()
        }
        render() {
            return (
                <div>
                    <input type="text" ref={this.inputRef} />
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
        }
        //已经渲染完毕 可以直接使用真实DOM
        componentDidMount() {
            //自动获取焦点
            this.inputRef.current.focus()
        }
    }
    ReactDOM.render(<Form />, document.getElementById("app"));
</script>

4.ref-forward

  • 类组件：
<script type='text/babel'>
    class ChildInput extends React.Component {
        render() {
            return (
                <div>
                    <h2>child input</h2>
                    <input type="text" ref={this.props.callbackRef} />
                </div>
            )
        }
    }
    // 需求：获取某个子组件里面的 具体某个DOM
    // 回调函数方式：给子组件传递一个回调函数callback，子组件通过ref = {callback}，把组件的具体DOM挂载到父组件属性
    class FatherForm extends React.Component {
    
        callbackRef = (e) => {
            this.inputRef = e
        }

        handleClick = () => {
            console.log(this);
            this.inputRef.focus()
        }

        render() {
            return (
                <div>
                    <ChildInput callbackRef={this.callbackRef} />
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
        }
    }
    ReactDOM.render(<FatherForm />, document.getElementById('app'))
</script>

在这里插入图片描述

  • 函数组件：
<script type='text/babel'>
    function ChildInput (props) {
        return (
            <div>
                <h2>child input</h2>
                <input type="text" ref={props.callbackRef} />
            </div>
        )
    }

    class FatherForm extends React.Component {
    
        callbackRef = (e) => {
            this.inputRef = e
        }

        handleClick = () => {
            console.log(this);
            this.inputRef.focus()
        }

        render() {
            return (
                <div>
                    <ChildInput callbackRef={this.callbackRef} />
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
        }
    }
    ReactDOM.render(<FatherForm />, document.getElementById('app'))
</script>

在这里插入图片描述

  • forward（转发）方式
<script type='text/babel'>
    function ChildInput(props ,ref) {
        return (
            <div>
                <h2>child input</h2>
                <input type="text" ref={ref} /> {/*地址 => {current:null} => {current:input}*/}
            </div>
        )
    }
    // 引用转发：引用地址的转发，自动传递ref的一种技术
    const RefChildInput = React.forwardRef(ChildInput)
    class FatherForm extends React.Component {
        constructor() {
            super()
            this.inputRef = React.createRef()
        }
        callbackRef = (e) => {
            this.inputRef = e
        }
        handleClick = () => {
            console.log(this);
            this.inputRef.current.focus()
        }
        render() {
            return (
                <div>
                    <RefChildInput ref={this.inputRef} />
                    <button onClick={this.handleClick}>commit</button>
                </div>
            )
        }
    }
    ReactDOM.render(<FatherForm />, document.getElementById('app'))
</script>

在这里插入图片描述

balance~~
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中ref的使用
weixin_45664217的博客
09-09 211
React中Ref是什么？ ref是React提供的用来操纵React组件实例或者DOM元素的接口。 ref的作用对象 ref可以作用于： React组件的实例 React.createRef();的使用 myRef = React.createRef() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.
react中ref的理解与简单运用
chen_ac的博客
05-27 575
react中ref的理解与简单运用
React中如何使用ref
qq_45149366的博客
04-25 2250
React如何使用ref
​react类组件定义ref的三种方式、以及函数式组件定义ref的方式；父组件获取子组件的自定义方法
LJ_759482的博客
04-02 8176
类组件ref的字符串方式 class App extends React.Component{ componentDidMount(){ console.log("componentDidMount...",this) this.refs.textInput.focus() } render(){ console.log("render...") ...
谈一谈创建React Component的几种方式
weixin_34102807的博客
02-19 326
当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候我以为创建组件只需要调用createClass这个api就可以了；但学习了ES6的语法后，又知道了可以利用继承...
react-native-svga
03-15
react-native-svga 入门 $ npm install react-native-svga --save 大多是自动安装 $ react-native link react-native-svga 用法 import { ISvgaProps , SVGAView } from 'react-native-svga' ... ref = { ( re
react-dnd-example:如何实现react-beautiful-dnd的示例
03-07
在本文中，我们将深入探讨如何使用`react-beautiful-dnd`库在React应用程序中实现优雅且功能丰富的拖放（dnd）功能。`react-beautiful-dnd`是一个强大的库，它为React应用提供了直观、易用且性能优异的拖放功能。...
react-native-toast-message：动画的Toast消息组件，可以强制调用
02-05
React本机烤面包消息 React Native的动画Toast消息组件。 命令式API 键盘感知灵活的配置安装yarn add react-native-toast-message用法在应用程序入口文件中渲染Toast组件（以及在那里可能呈现... Toast ref = { ( ref
react-quill的使用
02-25
ref={(el) => { this.reactQuillRef = el }} defaultValue={postRichText} key="1" id="textDiv1" theme="snow" modules={this.modules} /> ``` 工具栏配置 在 React-Quill 中，工具栏的配置可以通过 ...
react-reactpdf使用React创建PDF文件
08-14
React是目前非常流行的JavaScript库，主要用于构建用户界面。在React应用中，我们经常需要将数据导出为PDF格式，以便用户可以打印或离线查看。`react-pdf`库就是为了解决这个问题而生的，它允许我们在React项目中...
React 之 ref 详解
subsistent的博客
08-17 845
React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。
[React] ref属性
最新发布
Supposelll的博客
02-06 2243
ref即 reference ，是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。组件被调用时会新建一个该组件的实例，而ref就会指向这个实例。它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。为了防止内存泄漏，当卸载一个组件的时候，组件里所有的ref都会变为 null。
(property) React.MutableRefObject＜null＞.current: null这种报错怎么处理？
weixin_41704576的博客
05-12 986
这段代码是 TypeScript 的类型注解，表示一个名为 `current` 的可变引用类型变量，它的初始值为 `null`。在 React 中，`useRef` hook 返回的是一个可变引用类型变量，因此需要使用 `React.MutableRefObject` 类型来进行类型注解。该类型定义在 React 的声明文件中，并且具有一个泛型参数，用于指定引用变量的类型。在这个例子中，`React.MutableRefObject` 表示一个可变引用类型变量，其初始值为 `null`。
React中ref的使用方法和使用场景（详解）
weixin_46726346的博客
10-27 1万+
不管在Vue中还是React，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一个专属的API就是ref。而Vue中的ref可能比较简单，这一篇主要讲一下如何在React中使用ref，以及使用ref的场景。
【问题记录】React使用connect后，ref.current为null
草率小猿的博客
11-04 4085
在用React开发项目的过程中，遇到一个问题，使用connect连接子组件后，父组件调用子组件方法时，提示xxxRef.current为null的错误。
React基础知识之Ref回调函数处理
热门推荐
高山上的鱼
06-04 2万+
代码地址请在github查看，如果有新内容，我会定时更新，也欢迎您star,issue,共同进步1.为DOM元素添加Refreact支持一个ref属性，该属性可以添加到任何的组件上。该ref属性接收一个回调函数，这个回调函数在组件挂载或者卸载的时候被调用。当ref用于一个HTML元素的时候，ref指定的回调函数在调用的时候会接收一个参数，该参数就是指定的DOM元素。如下面的例子使用ref回调函数来保
react中组件实例三大属性之一ref介绍以及用法
weixin_48952990的博客
08-09 1419
react中组件实例三大属性之一ref介绍以及用法
React(onRef)父组件调用子组件中的方法
ZH
06-05 2225
import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; export default class Parent extends Component { render() { return( <View> <Child onRef={(ref)=>{this.ch
React(8)-组件ref引用
m0_65912225的博客
08-30 1753
目录 1.组件form 受控组件及其特点 非受控组件及其特点 模拟：简单受控组件表单 input两个方向绑定数据： 模拟：复杂(真实)受控组件表单(form里面有多种数据输入) 注意：handleChange1~5 中代码重复率高。 降低代码重复写法降低代码重复写法 模拟：非受控组件 受控组件形式自动时钟 非受控组件形式自动时钟 2.ref-函数类型实现 3.createRef实现 createRef实现自动化时钟 2.业务场景(登录)=>ref模拟for....
echarts-for-react ref
08-17
在使用echarts-for-react库中，可以通过ref属性来获取echarts实例。例如，可以在React组件中使用<ReactEcharts ref={(e) => (this.echarts_react = e)} />来获取echarts实例。然后可以使用this.echarts_react.getEchartsInstance()来获取实例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [echarts-for-react中数据发生变化，如何让图表实时更新](https://blog.csdn.net/qq_38918953/article/details/108725079)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [关于使用echarts-for-react时遇到的问题](https://blog.csdn.net/qq_28013889/article/details/110673098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值