Auf DOM-Knoten zugreifen, messen und fokussieren
Verwenden Sie Refs, um auf DOM-Knoten zuzugreifen, Eingabefelder nach dem Rendern zu fokussieren und die Größe eines Elements auf einfache, einsteigerfreundliche Weise zu messen.
Auf DOM-Knoten zugreifen, messen und fokussieren ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum auf das DOM zugreifen?
Ziel: Verwenden Sie useRef, um nach dem Rendern sicher auf DOM-Knoten zuzugreifen.
- Eine Ref an ein JSX-Element hängen
- ref.current innerhalb von Effekten auslesen
- Elemente fokussieren oder messen
Aktionen nach dem Rendern
Das DOM ist nach dem Rendern verfügbar. Verwenden Sie useEffect für Aktionen wie focus() oder zum Messen der Größe. Halten Sie das Rendern rein.
Demo: Eingabefeld automatisch fokussieren
Hängen Sie eine Ref an das Eingabefeld und rufen Sie focus() innerhalb von useEffect([]) auf, damit die Aktion nach dem ersten Paint ausgeführt wird.
<div id="root"></div>
Nach dem Rendern messen
Um ein Element zu messen, lesen Sie getBoundingClientRect() in einem Effekt aus ref.current aus. Aktualisieren Sie die Werte bei einer Größenänderung, damit sie aktuell bleiben.
Demo: Breite messen
Wir speichern eine Ref für eine Box und lesen beim Mounten sowie bei einer Größenänderung des Fensters ihre width aus. Das Cleanup entfernt den Listener.
<div id="root"></div>
Tipps und Stolperfallen
Tipps:
- Refs an echte DOM-Knoten hängen, etwa an ein input oder div
- Im useEffect lesen und Aktionen ausführen (nach dem Paint)
- Alle hinzugefügten Listener immer aufräumen
Prüfung: Fokus nach dem Rendern
Zusammenfassung
Zusammenfassung: Hängen Sie eine Ref an einen DOM-Knoten und verwenden Sie sie nach dem Rendern, um focus() aufzurufen oder Größen über getBoundingClientRect() auszulesen. Räumen Sie alle hinzugefügten Listener auf.
Häufig gestellte Fragen
Ist die Lektion „Auf DOM-Knoten zugreifen, messen und fokussieren“ kostenlos?
Ja — der vollständige Text von „Auf DOM-Knoten zugreifen, messen und fokussieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Auf DOM-Knoten zugreifen, messen und fokussieren“?
Verwenden Sie Refs, um auf DOM-Knoten zuzugreifen, Eingabefelder nach dem Rendern zu fokussieren und die Größe eines Elements auf einfache, einsteigerfreundliche Weise zu messen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.
Wie lange dauert die Lektion „Auf DOM-Knoten zugreifen, messen und fokussieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Werte ohne erneutes Rendern speichern
- Auf DOM-Knoten zugreifen, messen und fokussieren
- Veränderliche Refs für Timer und IDs