Toepassing van de useRef Hook voor DOM in React

In een van de vorige lessen hebben we genoemd dat refs het meest vaak worden toegepast voor toegang tot DOM elementen.

Refs schieten te hulp wanneer u, bijvoorbeeld, de focus op een element moet leggen, moet scrollen of de afmetingen en positie moet berekenen, of misschien gebruik moet maken van enkele van zijn methoden of eigenschappen, aangezien React geen ingebouwde methoden heeft voor dit soort zaken.

Laten we aan de hand van een voorbeeld met een invoerveld bekijken hoe dit wordt gedaan. Laten we een component maken met een invoerveld en een knop:

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

Om te beginnen, importeren we in de component useRef:

import { useRef } from 'react';

En we maken een ref ref aan in de component. We initialiseren deze met de waarde null:

const ref = useRef(null);

We hangen een click handler aan de knop:

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

Om toegang te hebben tot het invoerveld, schrijven we onze ref ref in het ref attribuut van het invoerveld. Op deze manier, wanneer React de DOM node voor dit invoerveld creëert, zal het een referentie eraan in ref.current plaatsen en kunnen we gebruikmaken van de methoden van het invoerveld:

<input ref={ref} />

En tenslotte, voegen we de click handler functie toe, zodat bij het klikken op de knop, de focus op het invoerveld wordt gelegd. Nu kunnen we dit doen via de ref, waarin de referentie naar ons invoerveld staat, door toegang te krijgen tot zijn methode focus:

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

Druk een paar keer op de knop en overtuig uzelf ervan dat de focus op het invoerveld wordt gelegd.

Neem de code van de component App, die we in deze les hebben geschreven en zorg ervoor dat bij het klikken op de knop er in het invoerveld, naast het leggen van de focus, ook nog een clearing van het invoerveld plaatsvindt. Maak hiervoor gebruik van de eigenschap value van het invoerveld.