Zastosowanie hooka useRef dla DOM w React

Na jednych z poprzednich zajęć wspominaliśmy, że refy są najczęściej używane do dostępu do elementów DOM.

Refy przydadzą się wtedy, gdy na przykład trzeba skupić się na elemencie, wykonać scroll lub obliczyć jego rozmiary i pozycję, a może skorzystać z niektórych jego metod lub właściwości, bo w React nie ma wbudowanych metod do takich rzeczy.

Spójrzmy na przykład z inputem, jak to się robi. Stwórzmy komponent z inputem i przyciskiem:

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

Na początek zaimportujmy do komponentu useRef:

import { useRef } from 'react';

I utwórzmy ref ref w komponencie. Zainicjujmy go wartością null:

const ref = useRef(null);

Dodajmy do przycisku obsługę kliknięcia:

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

Aby mieć dostęp do inputa, zapiszmy nasz ref ref w atrybucie ref inputa. W ten sposób, gdy React będzie tworzył węzeł DOM dla tego inputa, umieści referencję do niego w ref.current i będziemy mogli korzystać z metod inputa:

<input ref={ref} />

I wreszcie dodajmy funkcję obsługi kliknięcia, aby po kliknięciu przycisku na input był nakładany fokus. Teraz możemy to zrobić przez ref, w którym jest referencja do naszego inputa, odwołując się do jego metody focus:

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

Kliknij przycisk i upewnij się, że na input jest nakładany fokus.

Weź kod komponentu App, który napisaliśmy w tej lekcji i spraw, aby po kliknięciu przycisku w inputie oprócz nałożenia fokusu następowało także wyczyszczenie pola wprowadzania. Skorzystaj z właściwości value inputa.