Použití hooku useRef pro DOM v Reactu

V jedné z předchozích lekcí jsme zmínili, že se refy nejčastěji používají pro přístup k DOM elementům.

Refy přijdou vhod tehdy, když potřebujete, například, zaostřit na element, provést scroll nebo vypočítat jeho velikost a pozici, případně využít některé jeho metody nebo vlastnosti, protože na takové věci v React neexistují vestavěné metody.

Podívejme se na příkladu s inputem, jak se to dělá. Vytvořme komponentu s inputem a tlačítkem:

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

Pro začátek, importujme do komponenty useRef:

import { useRef } from 'react';

A založme ref ref v komponentě. Inicializujme jej hodnotou null:

const ref = useRef(null);

Přidejme na tlačítko handler kliku:

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

Abychom měli přístup k inputu, vložme náš ref ref do atributu ref inputu. Tímto způsobem, když React bude vytvářet DOM uzel pro tento input, vloží odkaz na něj do ref.current a my budeme moci používat metody inputu:

<input ref={ref} />

A nakonec, přidejme funkci pro zpracování kliku, aby po kliknutí na tlačítko, na input bylo zaostřeno. Nyní to můžeme udělat pomocí refu, ve kterém je odkaz na náš input, přístupem k jeho metodě focus:

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

Klikejte na tlačítko a přesvědčte se, že na input je zaostřováno.

Vezměte kód komponenty App, který jsme napsali v této lekci a udělejte to, aby po kliku na tlačítko v inputu kromě zaostření došlo ještě k vyčištění pole. Použijte k tomu vlastnost value inputu.