React Refs 学习笔记

React Refs 是一个非常重要的概念，它允许您直接访问 DOM 元素或组件实例，而不必通过 prop 属性传递信息。在某些情况下，使用 Refs 可以更轻松地处理各种情况。

创建 Refs

在 React 中，Refs 可以通过 React.createRef() 方法创建。这个方法返回一个新的 ref 对象，可以将其附加到 React 元素中。

javascriptCopy Code
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello, React!</div>;
  }
}

在上面的例子中，我们使用 React.createRef() 方法创建了一个名为 myRef 的 Ref 对象，并将其附加到 <div> 元素中。

访问 Refs

既然我们已经创建了 Ref 对象，那么如何使用它呢？

可以通过 ref.current 属性来访问 Ref 对象所关联的元素或组件实例。例如，在上面的例子中，可以使用以下代码访问 <div> 元素：

javascriptCopy Code
const node = this.myRef.current;

或者，如果 Ref 关联的是一个 class 组件，则可以使用以下代码访问该组件实例：

javascriptCopy Code
const instance = this.myRef.current;

Refs 的使用示例

在下面的示例中，我们将创建一个名为 TextInput 的组件，这个组件包含一个 <input> 元素，以及一个名为 focus 的方法。当该方法被调用时，它将焦点设置到 <input> 元素。

javascriptCopy Code
import React, { Component } from 'react';

class TextInput extends Component {
  constructor(props) {
    super(props);

    this.textInputRef = React.createRef();
  }

  focus() {
    this.textInputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.textInputRef} />
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.textInput = React.createRef();
  }

  handleClick() {
    this.textInput.current.focus();
  }

  render() {
    return (
      <div>
        <TextInput ref={this.textInput} />
        <button onClick={() => this.handleClick()}>Focus</button>
      </div>
    );
  }
}

在上述代码中，我们先创建了一个名为 TextInput 的组件，并在其中使用一个 Ref 对象 textInputRef 引用 <input> 元素。接着，在 focus 方法中，我们通过访问 textInputRef.current 来获得 <input> 元素，并将焦点设置到该元素。

在 App 组件中，我们创建了一个名为 textInput 的 Ref 对象，并将其作为 prop 传递给 TextInput 组件。最后，当用户单击按钮时，我们通过 textInput.current.focus() 调用 TextInput 组件中定义的 focus 方法，将焦点设置到输入框。