Fokus mit Refs und useEffect verwalten
Steuern Sie den Fokus in einer komponentenbasierten Welt.
Fokus mit Refs und useEffect verwalten ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. 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 Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum der Fokus verwaltet werden muss
Wenn die Benutzeroberfläche erscheint, verschwindet oder aktualisiert wird, kann der Tastatur-Fokus an der falschen Stelle landen oder verschwinden. In React steuern Sie ihn mit Refs und Effekten gezielt.
Ein ref verweist auf einen DOM-Knoten
useRef gibt Ihnen einen stabilen Verweis auf ein echtes Element. Nach dem Rendern ist ref.current der tatsächliche DOM-Knoten, auf dem Sie .focus() aufrufen können.
const inputRef = useRef(null);
<input ref={inputRef} />useEffect wird nach dem Rendern ausgeführt
Der Fokus muss gesetzt werden, sobald das Element im DOM vorhanden ist. useEffect wird ausgeführt, nachdem der Browser den Inhalt gezeichnet hat, und ist daher der sichere Ort, um den Fokus zu verschieben.
useEffect(() => {
inputRef.current.focus();
}, []);Fokus beim Mounten setzen
Ein leeres Abhängigkeitsarray bedeutet, dass der Effekt einmal beim Mounten der Komponente ausgeführt wird. Verwenden Sie dies, um den Fokus auf das erste Feld eines Formulars oder Schritts zu setzen.
Fokus setzen, wenn etwas geöffnet wird
Fügen Sie eine Abhängigkeit wie isOpen hinzu, damit der Effekt erneut ausgeführt wird, wenn sich der Status ändert. Wenn ein Bereich geöffnet wird, können Sie den Fokus direkt dorthin verschieben.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Auf null prüfen
Ein Ref kann null sein, wenn der Knoten noch nicht gerendert wurde. Prüfen Sie, ob ref.current vorhanden ist, bevor Sie .focus() aufrufen, damit ein fehlendes Element keinen Absturz verursacht.
ref.current?.focus();Nicht-Eingabefelder fokussierbar machen
Überschriften und divs sind standardmäßig nicht fokussierbar. Fügen Sie tabindex von -1 hinzu, damit das Skript sie fokussieren kann, ohne sie in die natürliche Tab-Reihenfolge aufzunehmen.
<div tabindex="-1" ref={regionRef}>...</div>Fokus beim Bereinigen wiederherstellen
Ein Effekt kann eine Bereinigungsfunktion zurückgeben. Verwenden Sie sie, um den Fokus beim Unmounten eines Layers an das auslösende Element zurückzugeben, damit Benutzer nicht am Seitenanfang landen.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Achten Sie auf veraltete Closures
Ein Effekt übernimmt Werte aus seinem Render-Vorgang. Wenn Sie den Fokus abhängig von Daten setzen, führen Sie diese im Abhängigkeitsarray auf, damit der Effekt aktuelle statt veralteter Werte verwendet.
forwardRef für untergeordnete Elemente
Um ein Element innerhalb einer untergeordneten Komponente zu fokussieren, umschließen Sie es mit forwardRef. Die übergeordnete Komponente besitzt dann ein Ref auf den inneren Knoten und kann ihn fokussieren.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Setzen Sie den Fokus nicht zu häufig
Verschieben Sie den Fokus nur, wenn es den Benutzer wirklich unterstützt, etwa beim Öffnen eines Dialogs oder Anzeigen eines Fehlers. Bei jedem Rendern den Fokus zu übernehmen, frustriert alle.
Kurztest
Sie möchten den Tastaturfokus direkt nach dem Rendern eines Elements durch React dorthin verschieben. Wo gehört das hin?
Zusammenfassung: Refs plus Effekte
Kombinieren Sie ein useRef mit einem useEffect, um den Fokus nach dem Rendern zu verschieben. Fangen Sie null ab, stellen Sie den Fokus bei der Bereinigung wieder her und steuern Sie ihn nur, wenn es hilfreich ist. 🎯
Häufig gestellte Fragen
Ist die Lektion „Fokus mit Refs und useEffect verwalten“ kostenlos?
Ja — der vollständige Text von „Fokus mit Refs und useEffect verwalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Fokus mit Refs und useEffect verwalten“?
Steuern Sie den Fokus in einer komponentenbasierten Welt. Du übst Web Accessibility 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 Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility 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 4.
Wie lange dauert die Lektion „Fokus mit Refs und useEffect verwalten“?
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 Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility 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
- Routenwechsel ohne Neuladen der Seite
- Fokus mit Refs und useEffect verwalten
- Fragments, Portals und die Falle der DOM-Reihenfolge
- jsx-a11y und Prüfungen auf Komponentenebene