React-da DOM bilen işlemek üçin useRef çeşmesini ulanmak

Öňki sapaklarymyzyň birinde biz ref-laryň iň köplenç DOM elementlerine girip bolmak üçin ulanylandygyny belläp geçdik.

Ref-lar size, meselem, elemente fokuslanmak, skroll etmek ýa-da onuň ölçeglerini we ýerleşişini hasaplamak, belki bolsa käbir metodlaryny ýa-da aýratynlyklaryny ulanmak zerur bolanda kömek eder, sebäbi React-da munuň ýaly işler üçin gurnalmaýan metodal ýok.

Giriş bilen nusgada muny nädip edýändigine serediň. Giriş we düwmäni öz içine alýan komponent dörediň:

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

Başlangyç üçin, komponente useRef import edeliň:

App.jsximport { useRef } from 'react';

We komponentde bir ref ref-i düzeliň. Ony null bahasy bilen başlangyçlandyryň:

App.jsxconst ref = useRef(null);

Düwme üçin basylma hadysasynyň işleýjisini baglalyň:

App.jsx<button onClick={handleClick}>focus</button>

Girişe girip bolmak üçin, bizim ref ref-imizi girişiň ref atly aýratynlygyna ýazalyň. Şeýlelik bilen, React bu giriş üçin DOM çygryny döredeniňde, oňa çykgytly salgysyny ref.current-a goýar we biz girişiň metodlaryny ulanyp bileris:

App.jsx<input ref={ref} />

We soňunda, düwmä basylanynda girişe fokuslanmak üçin basylma hadysasyny işleýän funksiýany goşalyň. Indi biz muny, girişimize salgyny saklaýan ref arkaly, onuň focus metodyna ýüzlenip edip bileris:

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

Düwmä basyp görüň we girişe fokuslanýandygyna göz ýetiriň.