Anvendelse af useRef Hook til DOM i React

I en af de foregående lektioner nævnte vi, at refs mest almindeligt anvendes til at få adgang til DOM-elementer.

Refs kommer til undsætning, når du for eksempel skal fokusere på et element, lave en scroll eller beregne dets størrelse og position, eller måske bruge nogle af dets metoder eller egenskaber, da der ikke er indbyggede metoder til sådanne ting i React.

Lad os se på et eksempel med et inputfelt, hvordan det gøres. Lad os oprette en komponent med et inputfelt og en knap:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

Til at starte med, importerer vi useRef i komponenten:

import { useRef } from 'react';

Og lad os oprette en ref ref i komponenten. Initialiser den med værdien null:

const ref = useRef(null);

Lad os tilføje en klik-håndterer til knappen:

<button onClick={handleClick}>focus</button>

For at have adgang til inputfeltet, skriver vi vores ref ref i inputfeltets ref attribut. På denne måde, når React opretter en DOM-node for dette inputfelt, vil den placere en reference til det i ref.current, og vi vil kunne bruge inputfeltets metoder:

<input ref={ref} />

Og til sidst tilføjer vi klik-håndteringsfunktionen, så der sættes fokus på inputfeltet, når der klikkes på knappen. Nu kan vi gøre dette via ref, som indeholder en reference til vores inputfelt, ved at tilgå dets metode focus:

function handleClick() {
	ref.current.focus();
}

Tryk på knappen og verificer, at der sættes fokus på inputfeltet.

Tag koden for App komponenten, som vi skrev i denne lektion, og gør således, at når der klikkes på knappen, skal inputfeltet foruden at få fokus også ryddes. Brug inputfeltets value egenskab til dette.