理解 React 中的 Refs 和 DOM：存取和操作 DOM 元素-js教程-PHP中文網

Understanding Refs and the DOM in React: Accessing and Manipulating DOM Elements

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>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

登入後複製

在此範例中：

this.inputRef 是使用 React.createRef() 建立的。
ref 被指派給 >透過 ref 屬性的元素。
在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>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

登入後複製

在此範例中：

inputRef 是使用 useRef 掛鉤建立的。
ref 附加到 >使用 ref 屬性的元素。
handleFocus 函數使用 inputRef.current 存取輸入元素，並呼叫 focus() 來聚焦輸入欄位。

3.參考用例

a.訪問 DOM 元素

Refs 通常用於直接存取和操作 DOM 元素。例如，可以使用 refs 輕鬆完成關注文字輸入或測量元素的大小。

b.管理焦點

Refs 可讓您管理元素的焦點，例如在元件安裝時或執行特定操作後聚焦於輸入欄位。

使用參考文獻管理焦點的範例：

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>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleFocus}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

登入後複製

在此範例中，由於 useEffect 掛鉤和 ref，當元件安裝時，輸入會自動對焦。

c.觸發動畫或與第三方函式庫整合

Refs 通常用於與第三方函式庫互動或觸發命令式動畫。例如，您可以使用 ref 來控制自訂動畫或與 jQuery 等非 React 函式庫互動。

d.表單驗證

Refs 還可以用於收集表單數據，而無需將數據儲存在 React 的狀態中，為不需要即時更新的表單提供了一個簡單的替代方案。

4.管理多個元素的引用

使用多個元素時，您可以將參考儲存在物件或陣列中以存取每個元素。

多個元素的引用範例：

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>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

登入後複製

在此範例中，使用引用陣列管理多個輸入元素，並使用按鈕來聚焦第二個輸入。