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ň:

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

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

import { useRef } from 'react';

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

const ref = useRef(null);

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

<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:

<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:

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

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

Bu sapakda ýazan App komponentiniň kodyny alyň we düwmä basylanynda girişde diňe fokuslanmak däl, eýsem girizilen meýdanyň arassalanmagyny hem ediň. Munuň üçin girişiň value aýratynlygyny ulanyň.