Dostęp do węzłów DOM, pomiary i ustawianie fokusu
Używaj referencji do uzyskiwania dostępu do węzłów DOM, ustawiaj fokus pól wejściowych po renderowaniu i mierz rozmiar elementu w prosty, przyjazny dla początkujących sposób.
Dostęp do węzłów DOM, pomiary i ustawianie fokusu to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 3. 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 3 lekcji w sumie.
Po co uzyskiwać dostęp do DOM-u?
Cel: Bezpieczne uzyskiwanie dostępu do węzłów DOM po renderowaniu za pomocą useRef.
- Dołączanie ref do elementu JSX
- Odczytywanie ref.current wewnątrz efektów
- Ustawianie fokusu lub mierzenie elementów
Działania po renderowaniu
DOM jest dostępny dopiero po renderowaniu. Należy używać useEffect do działań takich jak focus() lub pomiar rozmiaru. Renderowanie powinno być czyste.
Demonstracja: automatyczne ustawianie fokusu
Należy dołączyć ref do pola wejściowego i wywołać focus() wewnątrz useEffect([]), aby wykonał się po pierwszym wyświetleniu.
<div id="root"></div>
Pomiar po renderowaniu
Aby zmierzyć element, należy odczytać getBoundingClientRect() z ref.current w efekcie. Należy aktualizować wartość przy zmianie rozmiaru, aby dane były aktualne.
Demonstracja: pomiar szerokości
Przechowujemy ref do kontenera i odczytujemy jego szerokość podczas montowania oraz przy zmianie rozmiaru okna. Funkcja cleanup usuwa nasłuchiwacz.
<div id="root"></div>
Wskazówki i pułapki
Wskazówki:
- Refy należy dołączać do rzeczywistych węzłów DOM, na przykład input lub div.
- Dane należy odczytywać i działania wykonywać w useEffect po wyświetleniu.
- Zawsze należy wykonywać cleanup dodanych nasłuchiwaczy.
Kontrola fokusu po renderowaniu
Podsumowanie
Podsumowanie: Należy dołączyć ref do węzła DOM, a następnie używać go po renderowaniu do wywołania focus() lub odczytania rozmiarów za pomocą getBoundingClientRect(). Należy usuwać wszystkich dodanych nasłuchiwaczy.
Często zadawane pytania
Czy lekcja „Dostęp do węzłów DOM, pomiary i ustawianie fokusu” jest bezpłatna?
Tak — pełny tekst „Dostęp do węzłów DOM, pomiary i ustawianie fokusu” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Dostęp do węzłów DOM, pomiary i ustawianie fokusu”?
Używaj referencji do uzyskiwania dostępu do węzłów DOM, ustawiaj fokus pól wejściowych po renderowaniu i mierz rozmiar elementu w prosty, przyjazny dla początkujących sposób. Ćwiczysz React 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ąć React Academy?
Nie wymagamy żadnego doświadczenia. React 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 3.
Ile czasu zajmuje lekcja „Dostęp do węzłów DOM, pomiary i ustawianie fokusu”?
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 React Academy?
Tak. Każda lekcja React 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
- Przechowywanie wartości bez ponownego renderowania
- Dostęp do węzłów DOM, pomiary i ustawianie fokusu
- Zmienialne referencje dla timerów i identyfikatorów