Verwendung des useRef-Hooks für DOM in React

In einer der vorherigen Lektionen haben wir erwähnt, dass Refs am häufigsten für den Zugriff auf DOM-Elemente verwendet werden.

Refs werden dir zur Hilfe kommen, wenn du zum Beispiel den Fokus auf ein Element setzen, einen Scroll durchführen oder seine Größe und Position berechnen musst, oder möglicherweise einige seiner Methoden oder Eigenschaften nutzen möchtest, denn für solche Dinge gibt es in React keine eingebauten Methoden.

Schauen wir uns an einem Beispiel mit einem Input-Feld an, wie das gemacht wird. Erstellen wir eine Komponente mit einem Input-Feld und einem Button:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

Importieren wir zunächst in die Komponente useRef:

import { useRef } from 'react';

Und legen wir einen Ref ref in der Komponente an. Initialisieren wir ihn mit dem Wert null:

const ref = useRef(null);

Hängen wir auf den Button einen Event-Handler für den Klick:

<button onClick={handleClick}>focus</button>

Um Zugriff auf das Input-Feld zu haben, schreiben wir unseren Ref ref in das Attribut ref des Input-Felds. Auf diese Weise, wenn React den DOM-Knoten für dieses Input-Feld erstellt, legt es einen Verweis daran in ref.current ab und wir können die Methoden des Input-Felds nutzen:

<input ref={ref} />

Und schließlich fügen wir die Funktion zur Behandlung des Klicks hinzu, damit bei einem Klick auf den Button der Fokus auf das Input-Feld gesetzt wird. Jetzt können wir das über den Ref machen, in dem der Verweis auf unser Input-Feld liegt, indem wir auf seine Methode focus zugreifen:

function handleClick() {
	ref.current.focus();
}

Klicken Sie auf den Button und überzeugen Sie sich, dass der Fokus auf das Input-Feld gesetzt wird.

Nehmen Sie den Code der Komponente App, den wir in dieser Lektion geschrieben haben, und machen Sie es so, dass beim Klick auf den Button im Input-Feld zusätzlich zum Setzen des Fokus auch noch das Löschen des Eingabefelds erfolgt. Nutzen Sie dafür die Eigenschaft value des Input-Felds.