詳解React中如何獲取真實的dom

更新時間：2025年02月13日 10:08:56 作者：逆襲的菜鳥X

這篇文章主要為大家詳細介紹了React中獲取真實的dom的相關(guān)方法,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下

1. 函數(shù)組件中的 useRef

在函數(shù)組件中，獲取 DOM 元素的引用需要使用 useRef 鉤子。

示例：函數(shù)組件中的 useRef 用法

import React, { useRef } from 'react';

function MyComponent() {
  // 創(chuàng)建一個 ref 來引用 DOM 元素
  const inputRef = useRef(null);

  const focusInput = () => {
    // 通過 ref 訪問真實的 DOM 元素，并給它添加焦點
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default MyComponent;

解釋：

useRef 返回一個包含 .current 屬性的對象，current 可以指向真實的 DOM 元素（或者組件實例，具體取決于 ref 的用途）。

在這個例子中，inputRef.current 會指向 <input> 元素本身，你可以通過它訪問 DOM 元素的屬性和方法（例如 focus()）。

2. 類組件中的 createRef

在類組件中，獲取 DOM 元素的引用需要使用 React.createRef() 方法。

示例：類組件中的 createRef 用法

import React, { Component } from 'react';

class MyComponent extends Component {
  // 在類組件中創(chuàng)建 ref
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    // 通過 ref 訪問真實的 DOM 元素，并給它添加焦點
    this.inputRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>Focus the input</button>
      </div>
    );
  }
}

export default MyComponent;

解釋：

React.createRef() 用于在類組件中創(chuàng)建一個 ref 對象，this.inputRef.current 指向 DOM 元素（在此例中是 <input> 元素）。

focusInput 方法通過 this.inputRef.current.focus() 調(diào)用 DOM 方法來聚焦輸入框。

3. 訪問 DOM 元素的常見用途

獲取輸入框的值：你可以通過 ref 獲取到輸入框的值，雖然在大多數(shù)情況下，React 推薦使用受控組件來管理輸入框的值，但有時直接訪問 DOM 元素可能更簡單。

示例：

function MyComponent() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    alert(`Input value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

控制焦點：ref 可以用來控制元素的焦點（如前面的例子），讓用戶能夠交互時快速導航到特定的輸入框。

DOM 操作：你還可以直接操作 DOM 元素的其他屬性，如添加事件監(jiān)聽器、獲取元素尺寸、滾動等。

4. 使用 ref 獲取自定義組件的實例

除了 DOM 元素，ref 還可以用來獲取類組件的實例。

示例：獲取類組件實例

import React, { Component } from 'react';

class MyButton extends Component {
  clickHandler() {
    alert('Button clicked!');
  }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>;
  }
}

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

  triggerButtonClick = () => {
    this.buttonRef.current.clickHandler(); // 調(diào)用子組件的方法
  };

  render() {
    return (
      <div>
        <MyButton ref={this.buttonRef} />
        <button onClick={this.triggerButtonClick}>Trigger Child Button Click</button>
      </div>
    );
  }
}

export default ParentComponent;

解釋：

this.buttonRef.current 會指向子組件 MyButton 的實例，因此你可以直接調(diào)用它的方法（如 clickHandler()）。

ref 對于類組件和函數(shù)組件的使用方式略有不同，但它們的核心思想相同：通過 ref 獲取實例或 DOM 元素的引用。