Refs und das DOM in React verstehen: Auf DOM-Elemente zugreifen und diese bearbeiten

Refs und das DOM in React: Auf DOM-Elemente zugreifen und diese bearbeiten

In React werden refs verwendet, um direkt auf DOM-Elemente zuzugreifen und mit ihnen zu interagieren. Während React das DOM normalerweise auf deklarative Weise über Status und Requisiten verwaltet, gibt es Zeiten, in denen Sie möglicherweise direkt mit dem DOM interagieren müssen, z. B. für Animationen, den Fokus von Formularfeldern oder das Messen von Elementabmessungen. In diesen Fällen bieten Refs eine Möglichkeit, auf die zugrunde liegenden DOM-Knoten zuzugreifen.

---

1. Was sind Refs in React?

Ein ref (kurz für reference) ist ein Objekt, mit dem Sie auf ein DOM-Element oder eine React-Komponenteninstanz verweisen können. Refs können mit React.createRef() in Klassenkomponenten oder useRef() in Funktionskomponenten erstellt werden. Refs werden normalerweise verwendet, um:

• Greifen Sie direkt auf das DOM zu (z. B. um ein Eingabefeld zu fokussieren oder den Wert eines Formularelements abzurufen).
• Lösen Sie zwingende Animationen oder Aktionen aus.
• Integration mit Bibliotheken von Drittanbietern, die eine direkte DOM-Manipulation erfordern.

---

2. Refs erstellen und verwenden

In den Unterrichtskomponenten:

In Klassenkomponenten werden Refs mit React.createRef() erstellt. Der erstellte Ref wird dann über das Ref-Attribut an ein DOM-Element angehängt.

Beispiel für Referenzen in Klassenkomponenten:

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;

In diesem Beispiel:

• this.inputRef wird mit React.createRef() erstellt.
• Die Referenz wird dem zugewiesen. Element über das ref-Attribut.
• In der handleFocus-Methode greifen wir über this.inputRef.current auf das Eingabeelement zu und rufen focus() auf, um das Eingabefeld programmgesteuert zu fokussieren.

In Funktionskomponenten:

In Funktionskomponenten werden Refs mithilfe des useRef-Hooks erstellt. Mit dem useRef-Hook können Sie ein veränderbares Referenzobjekt erstellen, das über erneute Renderings hinweg bestehen bleibt.

Beispiel für Referenzen in Funktionskomponenten:

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;

In diesem Beispiel:

• inputRef wird mit dem useRef-Hook erstellt.
• Die Referenz wird an den angehängt. Element mit dem ref-Attribut.
• Die handleFocus-Funktion greift über inputRef.current auf das Eingabeelement zu und ruft focus() auf, um das Eingabefeld zu fokussieren.

---

3. Anwendungsfälle für Refs

a. Zugriff auf DOM-Elemente

Refs werden häufig verwendet, um direkt auf DOM-Elemente zuzugreifen und diese zu bearbeiten. Mit refs.

können Sie sich beispielsweise auf eine Texteingabe konzentrieren oder die Größe eines Elements messen

b. Fokus verwalten

Refs ermöglichen es Ihnen, den Fokus für Elemente zu verwalten, z. B. die Fokussierung auf ein Eingabefeld, wenn eine Komponente bereitgestellt wird oder nach einer bestimmten Aktion.

Beispiel für die Verwaltung des Fokus mit Referenzen:

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;

In diesem Beispiel wird die Eingabe automatisch fokussiert, wenn die Komponente bereitgestellt wird, dank des useEffect-Hooks und der Referenz.

c. Auslösen von Animationen oder Integrieren mit Bibliotheken von Drittanbietern

Refs werden häufig verwendet, um mit Bibliotheken von Drittanbietern zu interagieren oder zwingende Animationen auszulösen. Beispielsweise können Sie eine Referenz verwenden, um eine benutzerdefinierte Animation zu steuern oder mit einer Nicht-React-Bibliothek wie jQuery zu interagieren.

d. Formularvalidierung

Refs können auch zum Sammeln von Formulardaten verwendet werden, ohne die Daten im React-Status zu speichern, was eine einfache Alternative für Formulare darstellt, die keine Echtzeitaktualisierungen benötigen.

---

4. Referenzen für mehrere Elemente verwalten

Wenn Sie mit mehreren Elementen arbeiten, können Sie Refs in einem Objekt oder Array speichern, um auf jedes Element zuzugreifen.

Beispiel für Referenzen für mehrere Elemente:

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;

In diesem Beispiel werden mehrere Eingabeelemente mithilfe eines Arrays von Referenzen verwaltet und eine Schaltfläche wird verwendet, um die zweite Eingabe zu fokussieren.

---

5. Refs vs. Staat

Während Refs eine Möglichkeit zur Interaktion mit dem DOM bieten, wird Zustand in React zum Verwalten von Daten verwendet, die sich auf die Darstellung der Benutzeroberfläche auswirken. Es ist wichtig zu verstehen, wann die einzelnen Elemente zu verwenden sind:

• State wird für dynamisches Rendering verwendet: Wenn sich Daten ändern und beeinflussen, wie die Benutzeroberfläche gerendert werden soll, verwenden Sie state.
• Refs werden für imperative Aktionen verwendet: Wenn Sie direkt mit DOM-Elementen interagieren müssen (z. B. Fokussieren, Messen oder Auslösen von Animationen), verwenden Sie Refs.

---

6. Fazit

Refs in React sind eine leistungsstarke Funktion für den direkten Zugriff auf und die Bearbeitung von DOM-Elementen. Sie bieten eine unverzichtbare Möglichkeit zur Interaktion mit der Benutzeroberfläche und ermöglichen Vorgänge wie das Fokussieren von Eingabefeldern, das Auslösen von Animationen oder die Integration mit Bibliotheken von Drittanbietern.

Während React deklarative Ansätze mit Status und Requisiten fördert, dienen Refs als wesentliches Werkzeug, wenn Sie direktere Interaktionen mit dem DOM durchführen müssen.

Das obige ist der detaillierte Inhalt vonRefs und das DOM in React verstehen: Auf DOM-Elemente zugreifen und diese bearbeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!