Åtkomst till DOM-noder, mätning och fokusering
Använd refs för att komma åt DOM-noder, fokusera inmatningsfält efter rendering och mäta elementstorlek på ett enkelt och nybörjarvänligt sätt.
Åtkomst till DOM-noder, mätning och fokusering är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför komma åt DOM?
Mål: Använd useRef för att på ett säkert sätt nå DOM-noder efter rendering.
- Koppla en ref till ett JSX-element
- Läs ref.current i effekter
- Fokusera eller mät element
Åtgärder efter rendering
DOM är tillgänglig efter rendering. Använd useEffect för åtgärder som focus() eller storleksmätning. Håll renderingen ren.
Demo: automatisk fokusering
Koppla en ref till input-elementet och anropa focus() inuti useEffect([]) så att det körs efter den första painten.
<div id="root"></div>
Mät efter rendering
För att mäta ett element läser du getBoundingClientRect() från ref.current i en effekt. Uppdatera när storleken ändras så att värdena hålls aktuella.
Demo: mät bredd
Vi sparar en ref till en box och läser dess bredd vid montering och när fönstrets storlek ändras. Cleanup tar bort lyssnaren.
<div id="root"></div>
Tips och fallgropar
Tips:
- Koppla refs till riktiga DOM-noder (t.ex. input, div).
- Läs av och agera i useEffect (efter paint).
- Utför alltid cleanup för lyssnare som du lägger till.
Kontroll: fokusering efter rendering
Sammanfattning
Sammanfattning: Koppla en ref till en DOM-nod och använd den efter rendering för att anropa focus() eller läsa av storlekar via getBoundingClientRect(). Ta bort alla lyssnare som du lägger till.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Åtkomst till DOM-noder, mätning och fokusering” gratis?
Ja – hela texten till ”Åtkomst till DOM-noder, mätning och fokusering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Åtkomst till DOM-noder, mätning och fokusering”?
Använd refs för att komma åt DOM-noder, fokusera inmatningsfält efter rendering och mäta elementstorlek på ett enkelt och nybörjarvänligt sätt. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Åtkomst till DOM-noder, mätning och fokusering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Spara värden utan omrendering
- Åtkomst till DOM-noder, mätning och fokusering
- Föränderliga refs för timers och id:n