useRef-Hook

Der useRef Hook ermöglicht es uns, eine Variable zu erstellen, die eine Referenz auf ein Element, einen Wert oder andere Daten hält, die das Rendering der Komponente nicht beeinflussen. Dies kann nützlich sein, um veränderliche Werte zu speichern, auf DOM-Elemente zuzugreifen oder Werte über Komponentenneu-Renderings hinweg zu bewahren.

Syntax:

Um den useRef Hook zu nutzen, deklarieren wir eine Variable (refVariable) und weisen ihr das Ergebnis des Aufrufs von useRef() zu. Optional können wir einen Anfangswert (initialValue) als Argument an diesen Hook übergeben.

Hinweis

Der aktuelle Wert kann über die Eigenschaft refVariable.current abgerufen und aktualisiert werden. Der Vorteil von useRef ist, dass wir diese Werte manipulieren können, ohne ein erneutes Rendern der Komponente auszulösen.

Beispiel:

Lassen Sie uns die FormInput Komponente erstellen, die den useRef Hook verwendet, um eine Referenz auf ein Eingabeelement zu erstellen und es zu fokussieren, wenn ein Button geklickt wird.

In diesem Beispiel erstellt der useRef Hook eine Referenz namens inputRef. Diese Referenz wird dem ref Attribut des input Elements zugewiesen, wodurch wir auf das input Element über inputRef.current zugreifen können.

Zeilenweise Erklärung:

• Zeile 1: Wir importieren den useRef Hook aus der React-Bibliothek, um seine Funktionalität zu nutzen;
• Zeile 3: Die FormInput Komponente wird mit der herkömmlichen Funktionssyntax definiert;
• Zeile 4: Wir initialisieren die Variable inputRef mit dem useRef Hook, die die Eingabereferenz darstellt;
• Zeilen 6-8: Diese JavaScript-Pfeilfunktion verarbeitet die Logik für das Klicken auf den Button, wodurch der Cursor des Benutzers auf das Eingabefeld fokussiert wird;
• Zeilen 10-15: Das Markup der Komponente wird gerendert.
  1. In Zeile 12 setzen wir die Referenz mit dem ref Attribut und weisen die Variable inputRef als Wert zu;
  2. Der Button in Zeile 13 nutzt das onClick Attribut, um die Funktion anzugeben, die beim Klicken ausgeführt werden soll, in diesem Fall die handleClick Funktion.

Vollständiger App-Code: