当前位置：首页 > 文章列表 > 文章 > 前端 > 理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素

理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素

来源：dev.to 2024-12-29 15:04:00 0浏览收藏

本篇文章给大家分享《理解 React 中的 Refs 和 DOM：访问和操作 DOM 元素》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

react 中的 refs 和 dom：访问和操作 dom 元素

在 react 中，refs 用于直接访问 dom 元素 并与之交互。虽然 react 通常通过状态和 props 以声明式方式管理 dom，但有时您可能需要直接与 dom 交互，例如动画、表单字段焦点或测量元素尺寸。在这些情况下，refs 提供了一种访问底层 dom 节点的方法。

1. react 中的 refs 是什么？

a ref （reference 的缩写）是一个允许你引用 dom 元素或 react 组件实例的对象。可以在类组件中使用 react.createref() 或在函数组件中使用 useref() 创建 ref。参考文献通常用于：

直接访问 dom（例如，聚焦输入字段或获取表单元素的值）。
触发命令式动画或动作。
与需要直接 dom 操作的第三方库集成。

2.创建和使用参考

类组件：

在类组件中，引用是使用 react.createref() 创建的。然后，创建的 ref 通过 ref 属性附加到 dom 元素。

类组件中的引用示例：

import react, { component } from 'react';

class mycomponent extends component {
  constructor(props) {
    super(props);
    // create a ref to access the input element
    this.inputref = react.createref();
  }

  handlefocus = () => {
    // access the dom node directly and focus the input element
    this.inputref.current.focus();
  };

  render() {
    return (
      <div>
        &lt;input ref={this.inputref} type=&quot;text&quot; /&gt;
        <button onclick={this.handlefocus}>focus input</button>
      </div>
    );
  }
}

export default mycomponent;

在此示例中：

this.inputref 是使用 react.createref() 创建的。
ref 通过 ref 属性分配给 <input /> 元素。
在handlefocus方法中，我们通过this.inputref.current访问输入元素并调用focus()以编程方式聚焦输入字段。

在函数组件中：

在函数组件中，引用是使用 useref 钩子创建的。 useref 钩子允许您创建一个在重新渲染期间持续存在的可变引用对象。

函数组件中的引用示例：

import react, { useref } from 'react';

const mycomponent = () => {
  const inputref = useref();

  const handlefocus = () => {
    // access the dom node directly and focus the input element
    inputref.current.focus();
  };

  return (
    <div>
      &lt;input ref={inputref} type=&quot;text&quot; /&gt;
      <button onclick={handlefocus}>focus input</button>
    </div>
  );
};

export default mycomponent;

在此示例中：

inputref 是使用 useref 钩子创建的。
使用 ref 属性将 ref 附加到 <input /> 元素。
handlefocus 函数使用 inputref.current 访问输入元素，并调用 focus() 来聚焦输入字段。

3.参考用例

a.访问 dom 元素

refs 通常用于直接访问和操作 dom 元素。例如，可以使用 refs 轻松完成关注文本输入或测量元素的大小。

b.管理焦点

refs 允许您管理元素的焦点，例如在组件安装时或在执行特定操作后聚焦于输入字段。

使用参考文献管理焦点的示例：

import react, { useeffect, useref } from 'react';

const focusinput = () => {
  const inputref = useref();

  useeffect(() => {
    // focus the input when the component mounts
    inputref.current.focus();
  }, []);

  return &lt;input ref={inputref} type=&quot;text&quot; /&gt;;
};

export default focusinput;

在此示例中，由于 useeffect 挂钩和 ref，当组件安装时，输入会自动聚焦。

c.触发动画或与第三方库集成

refs 通常用于与第三方库交互或触发命令式动画。例如，您可以使用 ref 来控制自定义动画或与 jquery 等非 react 库交互。

d.表单验证

refs 还可以用于收集表单数据，而无需将数据存储在 react 的状态中，为不需要实时更新的表单提供了一个简单的替代方案。

4.管理多个元素的引用

使用多个元素时，您可以将引用存储在对象或数组中以访问每个元素。

多个元素的引用示例：

import React, { useRef } from 'react';

const MultipleRefs = () => {
  const inputRefs = [useRef(), useRef(), useRef()];

  const focusInput = (index) => {
    inputRefs[index].current.focus();
  };

  return (
    <div>
      &lt;input ref={inputRefs[0]} type=&quot;text&quot; /&gt;
      &lt;input ref={inputRefs[1]} type=&quot;text&quot; /&gt;
      &lt;input ref={inputRefs[2]} type=&quot;text&quot; /&gt;
      <button onClick={() => focusInput(1)}>Focus Second Input</button>
    </div>
  );
};

export default MultipleRefs;

在此示例中，使用引用数组管理多个输入元素，并使用按钮来聚焦第二个输入。