Gestire il focus con refs e useEffect
Gestire il focus in un'architettura basata su componenti
Gestire il focus con refs e useEffect è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Perché è necessario gestire il focus
Quando l'interfaccia appare, scompare o si aggiorna, il focus della tastiera può finire nel posto sbagliato o scomparire. In React lo si controlla intenzionalmente con ref ed effect.
Un ref punta a un nodo DOM
useRef fornisce un riferimento stabile a un elemento reale. Dopo il rendering, ref.current è il nodo DOM effettivo su cui può chiamare .focus().
const inputRef = useRef(null);
<input ref={inputRef} />useEffect viene eseguito dopo il rendering
Il focus deve essere impostato quando l'elemento esiste nel DOM. useEffect viene eseguito dopo il rendering del browser, quindi è il punto sicuro in cui spostare il focus.
useEffect(() => {
inputRef.current.focus();
}, []);Impostare il focus al montaggio
Un array di dipendenze vuoto indica che l'effect viene eseguito una volta, quando il componente viene montato. Lo usi per impostare il focus sul primo campo di un modulo o di un passaggio.
Impostare il focus quando qualcosa si apre
Aggiunga una dipendenza come isOpen, così l'effect viene eseguito di nuovo quando lo stato cambia. Quando si apre un pannello, può spostare direttamente il focus al suo interno.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Gestire i valori null
Un ref può essere null se il nodo non è ancora stato renderizzato. Verifichi che ref.current esista prima di chiamare .focus(), per evitare un errore causato da un elemento mancante.
ref.current?.focus();Rendere focalizzabili gli elementi che non sono input
Le intestazioni e i div non sono focalizzabili per impostazione predefinita. Aggiunga tabindex di -1 per consentire allo script di focalizzarli senza inserirli nell'ordine naturale di tabulazione.
<div tabindex="-1" ref={regionRef}>...</div>Ripristinare il focus durante la pulizia
Un effect può restituire una funzione di pulizia. La usi per riportare il focus al trigger quando un layer viene smontato, così gli utenti non si ritrovano all'inizio della pagina.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Attenzione alle closure obsolete
Un effect cattura i valori del proprio rendering. Se imposta il focus in base a dei dati, li inserisca nell'array di dipendenze, così l'effect usa valori aggiornati e non obsoleti.
forwardRef per gli elementi figli
Per impostare il focus su un elemento all'interno di un componente figlio, lo avvolga in forwardRef. Il componente padre avrà così un ref al nodo interno e potrà focalizzarlo.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Non imposti il focus più del necessario
Sposti il focus solo quando è davvero utile all'utente, ad esempio per aprire una finestra di dialogo o mostrare un errore. Catturare il focus a ogni rendering è frustrante per tutti.
Controllo rapido
Vuole spostare il focus della tastiera su un elemento subito dopo che React lo ha renderizzato. Dove deve farlo?
Riepilogo: ref più effect
Combini un useRef con un useEffect per spostare il focus dopo il rendering. Gestisca i valori null, ripristini il focus durante la pulizia e lo controlli solo quando è utile. 🎯
Domande Frequenti
La lezione «Gestire il focus con refs e useEffect» è gratuita?
Sì — il testo completo di «Gestire il focus con refs e useEffect» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Gestire il focus con refs e useEffect»?
Gestire il focus in un'architettura basata su componenti Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Gestire il focus con refs e useEffect»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Gestire i cambi di route senza ricaricare la pagina
- Gestire il focus con refs e useEffect
- Fragment, Portal e il problema dell'ordine nel DOM
- jsx-a11y e protezioni a livello di componente