Användning av useRef-hook för DOM i React

I en av de tidigare lektionerna nämnde vi att refs oftast används för att komma åt DOM-element.

Refs kommer till undsättning när du, till exempel, behöver fokusera på ett element, göra en scroll eller beräkna dess storlek och position, eller kanske använda några av dess metoder eller egenskaper, för för sådana saker finns det inga inbyggda metoder i React.

Låt oss titta på ett exempel med en input, hur det görs. Låt oss skapa en komponent med en input och en knapp:

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

Först, importera useRef till komponenten:

import { useRef } from 'react';

Och skapa en ref ref i komponenten. Initiera den med värdet null:

const ref = useRef(null);

Lägg till en klickhanterare på knappen:

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

För att ha tillgång till input, sätt vår ref ref i inputens ref-attribut. På så sätt, när React skapar en DOM-nod för denna input, kommer den att sätta en referens till den i ref.current och vi kan använda inputens metoder:

<input ref={ref} />

Och slutligen, lägg till funktionen för klickhantering, så att när knappen klickas, sätts fokus på input. Nu kan vi göra detta genom ref, där vi har en referens till vår input, genom att använda dess metod focus:

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

Tryck på knappen och se till att fokus sätts på input.

Ta koden för komponenten App, som vi skrev i den här lektionen och gör så att när knappen klickas så ska input förutom att få fokus även rensas. Använd egenskapen value för input.