react Ref 的基本使用

类组件中使用ref

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

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

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

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

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

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

  // ...
}

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

3. 绑定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元素上。

4. 在类组件中使用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() {