Bruk av useRef Hook for DOM i React

I en av de foregående timene nevnte vi at refs mest vanligvis brukes for tilgang til DOM-elementer.

Refs kommer til unnsetning når du for eksempel trenger å fokusere på et element, gjøre en scroll eller beregne dets størrelse og posisjon, eller kanskje bruke noen av dets metoder eller egenskaper, siden React ikke har innebygde metoder for slike ting.

La oss se på et eksempel med en input, hvordan dette gjøres. La oss opprette en komponent med en input og en knapp:

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

Til å begynne med, importerer vi useRef inn i komponenten:

import { useRef } from 'react';

Og oppretter en ref ref i komponenten. Initialiserer den med verdien null:

const ref = useRef(null);

Legg til en klikk-håndterer på knappen:

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

For å ha tilgang til inputen, skriver vi vår ref ref i attributten ref til inputen. På denne måten, når React oppretter DOM-noden for denne inputen, vil den legge en referanse til den i ref.current og vi kan bruke inputens metoder:

<input ref={ref} />

Og til slutt, legger vi til en funksjon for klikk-håndtering, sånn at når det klikkes på knappen, vil inputen få fokus. Nå kan vi gjøre dette via ref-en, som inneholder referansen til vår input, ved å bruke dens metode focus:

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

Trykk på knappen og se at inputen får fokus.

Ta koden til komponenten App, som vi skrev i denne leksjonen og gjør slik at når det klikkes på knappen skjer det ikke bare fokus på inputen, men også at inndatafeltet tømmes. Bruk egenskapen value til inputen for dette.