useRef hook-unun DOM ucun React-də istifadəsi

Əvvəlki dərslərin birində qeyd etdik ki, reflər ən çox DOM elementlərinə müraciət etmək ucun istifadə olunur.

Refər köməyinizə çatacaq o vaxtlarda ki, məsələn, elementə fokuslanmaq, skrol etmək və ya onun olculərini ve mövqeyini hesablamaq lazımdır, və ya bəlkə də onun bəzi metodlarından ve ya xüsusiyyətlərindən istifadə etmək lazımdır, axı React-də bu kimi şeylər ucun daxili metodlar yoxdur.

Gəlin bir input nümunəsi ilə baxaq, bu necə edilir. Bir input ve düyməsi olan komponent yaradaq:

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

Əvvəla, komponentə useRef import edək:

import { useRef } from 'react';

Və komponentdə bir ref ref yaradaq. Onu null dəyəri ilə işə salaq:

const ref = useRef(null);

Düyməcik üzərində klik işləyicisi qeyd edək:

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

Inputa müraciət etmək ucun, bizim ref ref-i inputun ref atributuna yazaq. Beləliklə, React bu input ucun DOM qovşağı yaradanda, ona olan istinadı ref.current-ə qoyacaq ve biz inputun metodlarından istifadə edə biləcəyik:

<input ref={ref} />

Və nəhayət, klikin emalı funksiyasını əlavə edək, ki, düyməyə kliklənəndə, inputa fokus vurulsun. İndi biz bunu ref vasitəsilə edə bilərik, hansında ki bizim inputa istinad var, onun focus metoduna müraciət edərək:

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

Düyməyə basın ve əmin olun ki, inputa fokus vurulur.

Bu dərsdə yazdığımız App komponentinin kodunu götürün ve elə edin ki, düyməyə kliklənəndə inputda fokusun vurulması ile yanaşı daxil etmə sahəsinin təmizlənməsi də baş versin. Bunun ucün inputun value xüsusiyyətindən istifadə edin.