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:

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

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

App.jsximport { useRef } from 'react';

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

App.jsxconst ref = useRef(null);

Adjunk a gombra egy kattintás kezelőt:

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

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

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

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