Zarządzanie fokusem za pomocą refs i useEffect
Steruj fokusem w świecie komponentów.
Zarządzanie fokusem za pomocą refs i useEffect to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Dlaczego trzeba zarządzać fokusem
Gdy interfejs się pojawia, znika lub aktualizuje, fokus klawiatury może trafić w niewłaściwe miejsce albo zniknąć. W React można nim świadomie sterować za pomocą refów i efektów.
Ref wskazuje węzeł DOM
useRef daje stabilny uchwyt do rzeczywistego elementu. Po renderowaniu ref.current zawiera rzeczywisty węzeł DOM, na którym można wywołać .focus().
const inputRef = useRef(null);
<input ref={inputRef} />useEffect uruchamia się po renderowaniu
Fokus można ustawić dopiero wtedy, gdy element istnieje w DOM-ie. useEffect uruchamia się po wyrenderowaniu zawartości przez przeglądarkę, dlatego jest bezpiecznym miejscem do przenoszenia fokusu.
useEffect(() => {
inputRef.current.focus();
}, []);Ustawianie fokusu przy montowaniu
Pusta tablica zależności oznacza, że efekt uruchamia się raz, gdy komponent zostaje zamontowany. Użyj tego, aby ustawić fokus na pierwszym polu formularza lub kroku.
Ustawianie fokusu po otwarciu elementu
Dodaj zależność, taką jak isOpen, aby efekt uruchamiał się ponownie po zmianie stanu. Gdy panel się otworzy, możesz przenieść fokus bezpośrednio do jego wnętrza.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Zabezpiecz się przed nullem
Ref może mieć wartość null, jeśli węzeł nie został jeszcze wyrenderowany. Sprawdź, czy istnieje ref.current, zanim wywołasz .focus(), aby uniknąć błędu z powodu brakującego elementu.
ref.current?.focus();Umożliwiaj ustawianie fokusu elementom niebędącym polami wejściowymi
Nagłówki i elementy div nie mogą domyślnie otrzymać fokusu. Dodaj tabindex o wartości -1, aby skrypt mógł ustawić na nich fokus bez dodawania ich do naturalnej kolejności przechodzenia klawiszem Tab.
<div tabindex="-1" ref={regionRef}>...</div>Przywracaj fokus podczas czyszczenia
Efekt może zwracać funkcję czyszczącą. Użyj jej, aby po odmontowaniu warstwy przenieść fokus z powrotem na element wyzwalający, dzięki czemu użytkownik nie zostanie przeniesiony na początek strony.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Uważaj na nieaktualne domknięcia
Efekt przechwytuje wartości z momentu renderowania. Jeśli ustawiasz fokus na podstawie danych, umieść je w tablicy zależności, aby efekt korzystał z aktualnych, a nie nieaktualnych wartości.
forwardRef dla elementów potomnych
Aby ustawić fokus na elemencie wewnątrz komponentu potomnego, owiń go w forwardRef. Komponent nadrzędny będzie wtedy przechowywać ref do wewnętrznego węzła i będzie mógł ustawić na nim fokus.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Nie ustawiaj fokusu bez potrzeby
Przenoś fokus tylko wtedy, gdy rzeczywiście pomaga to użytkownikowi, na przykład przy otwieraniu okna dialogowego lub wyświetlaniu błędu. Przejmowanie fokusu przy każdym renderowaniu frustruje wszystkich.
Szybki test
Chcesz przenieść fokus klawiatury na element natychmiast po jego wyrenderowaniu przez React. Gdzie należy umieścić taką logikę?
Podsumowanie: refy i efekty
Połącz useRef z useEffect, aby przenosić fokus po renderowaniu. Zabezpiecz się przed wartością null, przywracaj fokus podczas czyszczenia i steruj nim tylko wtedy, gdy to pomaga. 🎯
Często zadawane pytania
Czy lekcja „Zarządzanie fokusem za pomocą refs i useEffect” jest bezpłatna?
Tak — pełny tekst „Zarządzanie fokusem za pomocą refs i useEffect” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zarządzanie fokusem za pomocą refs i useEffect”?
Steruj fokusem w świecie komponentów. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Zarządzanie fokusem za pomocą refs i useEffect”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Zmiany tras bez ponownego ładowania strony
- Zarządzanie fokusem za pomocą refs i useEffect
- Fragmenty, portale i pułapka kolejności DOM
- jsx-a11y i zabezpieczenia na poziomie komponentów