react类组件中使用 this.refs的示例

在 React 类组件中使用 `this.refs` 的示例：

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

  componentDidMount() {
    this.myRef.current.focus();
  }

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

在上面的示例中，我们首先通过 `React.createRef()` 在构造函数中创建了一个 `myRef` 的引用。在 `componentDidMount()` 方法中，我们调用 `this.myRef.current.focus()` 来让输入框自动获取焦点。在 `render()` 方法中，我们将 `myRef` 引用传递给 `input` 元素的 `ref` 属性，这样就能在其他方法中访问到该元素了。

相关问题

this.refs.list.forEach遍历循环组件方法，但只执行了一次

`this.refs`返回的是一个对象，其中属性名为`ref`值，属性值为对应的组件实例。如果你想要遍历多个组件实例并执行相同的方法，可以将多个组件实例保存在一个数组中，然后遍历该数组执行方法。

例如，可以在父组件中定义一个数组`listRefs`，在每个子组件的`componentDidMount`方法中将自身的实例添加到该数组中，然后在父组件中执行遍历该数组并执行方法的操作。

代码示例如下：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.listRefs = []; // 定义保存子组件实例的数组
  }

  // 在每个子组件的componentDidMount方法中将实例添加到数组中
  addChildRef = (ref) => {
    this.listRefs.push(ref);
  }

  // 执行遍历数组并执行方法的操作
  handleClick = () => {
    this.listRefs.forEach((ref) => {
      ref.someMethod(); // 执行子组件的方法
    });
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.addChildRef} />
        <ChildComponent ref={this.addChildRef} />
        <button onClick={this.handleClick}>执行方法</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  componentDidMount() {
    // 将自身的实例添加到父组件的数组中
    this.props.ref(this);
  }

  someMethod() {
    console.log('执行了子组件的方法');
  }

  render() {
    return (
      <div>子组件</div>
    );
  }
}

在上面的代码中，父组件定义了一个数组`listRefs`，并在每个子组件的`componentDidMount`方法中将自身的实例添加到该数组中。在父组件的`handleClick`方法中，遍历该数组并执行子组件的`someMethod`方法。

需要注意的是，在子组件中，`ref`属性不能直接使用字符串，需要将其传递给一个回调函数，该函数会在子组件的`componentDidMount`方法中被调用，并将子组件的实例作为参数传递给该函数。

react 18.2.0 class函數 refs 代码实列

以下是一个使用 React 18.2.0 和 class 函数组件的代码示例，其中包含使用 refs 的实例：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

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

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

export default MyComponent;

在上面的示例中，我们创建了一个名为 `MyComponent` 的 class 函数组件，并在 constructor 中使用 `React.createRef()` 方法来创建一个名为 `textInput` 的 ref 对象。在 `componentDidMount()` 生命周期方法中，我们使用 `this.textInput.current.focus()` 方法来将焦点设置在输入框上。最后，我们在 render 方法中将 ref 对象传递给输入框元素，以便我们可以在其他地方使用它。

当组件挂载时，`componentDidMount()` 方法将被调用，并且我们可以使用 `this.textInput.current` 引用到输入框元素。在这个示例中，我们使用 `focus()` 方法将焦点设置为输入框。

这只是一个简单的示例，但它演示了如何使用 React 18.2.0 中的 class 函数组件和 refs。