A useRef hook alkalmazása DOM-hoz Reactben

Az egyik korábbi órán említettük, hogy a ref-eket leggyakrabban DOM elemek elérésére használják.

A ref-ek akkor jönnek jól, amikor például egy elemre kell fókuszálni, görgetni kell, vagy ki kell számolni a méreteit és pozícióját, esetleg ki kell használni valamilyen metódusát vagy tulajdonságát, hiszen az ilyen dolgokhoz a Reactben nincsenek beépített metódusok.

Nézzük meg egy input mező példáján, hogyan is történik ez. Hozzunk létre egy komponenst input mezővel és egy gombbal:

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

Először is importáljuk a komponensbe a useRef-et:

import { useRef } from 'react';

És hozzunk létre egy ref ref-et a komponensben. Inicializáljuk null értékkel:

const ref = useRef(null);

Adjunk a gombra egy kattintás kezelőt:

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

Ahhoz, hogy hozzáférjünk az input mezőhöz, írjuk bele a ref-ünket ref az input ref attribútumába. Így amikor a React létrehozza ennek az inputnak a DOM csomópontját, egy referenciát rá fog helyezni a ref.current-be, és mi használhatjuk az input metódusait:

<input ref={ref} />

Végül pedig adjuk hozzá a kattintás kezelő függvényt, hogy a gombra kattintva az input mezőre kerüljön a fókusz. Most már megtehetjük ezt a ref-en keresztül, amelyben az input mezőnkre mutató referencia található, ha hozzáférünk a focus metódusához:

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

Kattintgass a gombon és győződj meg róla, hogy az input mezőre kerül a fókusz.

Vedd a App komponens kódját, amit ezen az órán írtunk, és tedd úgy, hogy a gombra kattintva az input mezőn a fókusz beállításon kívül a beviteli mező tartalma is törlődjon. Ehhez használd az input value tulajdonságát.