Reactda DOM bilan ishlash uchun useRef hook'idan foydalanish

Oldingi darslarimizdan birida aytib o'tganimizdek, ref'lar ko'pincha DOM elementlariga kirish uchun qo'llaniladi.

Ref'lar sizga, masalan, elementga fokuslanish, skroll qilish yoki uning o'lchami va joylashuvini hisoblash kerak bo'lganda, yoki uning ba'zi metodlari yoki xususiyatlaridan foydalanish zarurat tug'ilganda yordam beradi, chunki Reactda bunday narsalar uchun o'rnatilgan metodlar mavjud emas.

Keling, buni qanday amalga oshirilishini input misolda ko'rib chiqaylik. Input va tugmadan iborat komponent yaratamiz:

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

Boshlash uchun, komponentga useRef ni import qilamiz:

import { useRef } from 'react';

Va komponentda ref ref'ini yaratamiz. Uni null qiymati bilan ishga tushiramiz:

const ref = useRef(null);

Tugmacha uchun klik handler'ini qo'shamiz:

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

Inputga kirish imkoniyatiga ega bo'lish uchun, ref atributiga ref ref'imizni yozamiz. Shu tarzda, React ushbu input uchun DOM tugunini yaratganda, unga havolani ref.current da joylaydi va biz input metodlaridan foydalana olamiz:

<input ref={ref} />

Va nihoyat, tugmachani bosganda inputga fokus o'tkazish uchun klikni qayta ishlash funksiyasini qo'shamiz. Endi biz buni inputga havola bo'lgan ref orqali, uning focus metodiga murojat qilib amalga oshirishimiz mumkin:

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

Tugmachani bosing va inputga fokus o'tkazilishiga ishonch hosil qiling.

Ushbu darsda yozgan App komponenti kodini oling va tugmacha bosilganda inputda fokus o'tkazish bilan birga kiritish maydonchasi tozalansin. Buning uchun inputning value xususiyatidan foydalaning.