react中refs的使用

最新推荐文章于 2023-10-17 15:37:45 发布

原创最新推荐文章于 2023-10-17 15:37:45 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了React中管理DOM元素引用的三种方法：回调形式、API形式和useRef Hook。回调形式通过在组件中定义函数并将其作为ref属性的值；API形式使用React.createRef()创建并附加到元素；useRef Hook则适用于函数组件，提供了一个可变的ref对象。这些方法都允许开发者直接访问DOM节点或React组件实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里介绍三种用法：回调形式、api形式、ref hooks

1、回调形式

使用回调会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数

import React, { useRef, Component } from 'react'

export default class Demo extends Component {
    cli = () => {
    	//此时的handler就会被挂载到this上，即Demo组件的实例对象上
        const { handler } = this
        console.log(handler,111)
    }
    render() {
        return (
            <div>
                <input ref={curNode=> this.handler = curNode} />
                <button onClick={this.cli}>点击</button>
            </div> 
        )
    }
}

在这里插入图片描述

2、api形式

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

不过这种方式我是很少用，一般都是用hooks方式

class Demoextends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

3、useRef hooks

import React, { useRef } from 'react'
export default function Demo() {
    const tRefs = useRef()

    const handleInputChange = (e) => {
        console.log(tRefs)
    }

    return (
        <div>
            <input ref={tRefs} type="text" onChange={(e) => handleInputChange(e)} />
            <button>点击</button>
        </div>
    )
}

在这里插入图片描述