react Ref 的基本使用

原创

已于 2023-08-02 17:17:35 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-08-02 17:16:22 首次发布

类组件中使用ref

在类组件中，你可以使用createRef来创建一个ref，并将它附加到DOM元素或类组件实例上。使用ref允许你在类组件中访问和操作特定的DOM元素或类组件实例。

下面是在类组件中使用ref的步骤：

引入React和createRef：
在类组件文件的顶部，你需要从React中导入React和createRef。

import React, {
   
    Component, createRef } from 'react';

创建ref：
使用createRef来创建一个ref对象。

class MyClassComponent extends Component {
   
   
  constructor(props) {
   
   
    super(props);
    this.myRef = createRef();
  }

  // ...
}

在上面的例子中，我们在类组件MyClassComponent的构造函数中创建了一个ref（myRef）。

绑定ref到DOM元素或类组件实例：
将创建的ref（myRef）绑定到你想要引用的DOM元素或类组件实例上。在类组件中，你可以使用ref属性来实现这一点。

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

在上面的例子中，我们将ref（myRef）绑定到了一个input元素上。

在类组件中使用ref：
现在，你可以在类组件的其他方法中通过this.myRef.current来访问和操作引用的DOM元素或类组件实例。

class MyClassComponent extends Component {
   
   
  constructor(props) {
   
   
    super(props);
    this.myRef = createRef();
  }

  handleButtonClick = () => {
   
   
    if (this.myRef.current) {
   
   
      this.myRef.current.focus();
    }
  };

  render() {
   
   </