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:

App.jsxreturn (
  <div>
    <input />
    <button>focus</button>
  </div>
);

Pro začátek, importujme do komponenty useRef:

App.jsximport { useRef } from 'react';

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

App.jsxconst ref = useRef(null);

Přidejme na tlačítko handler kliku:

App.jsx<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:

App.jsx<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:

App.jsxfunction handleClick() {
  ref.current.focus();
}

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