useRef hook
useRef - renderlash uchun kerak bo'lmagan qiymatga murojaat qilish imkonini beruvchi React Hook.
Biz NewEventForm.js komponentida input va selectlar orqali kiritayotgan ma'lumotlarimiz useState orqali saqlanayotgan edi. Biz har biri uchun useState ochdik. input va selectlardan olinayotgan ma'lumotlar onChange() eventi orqali target qilinib olinmoqda
Agar biz javascript orqali ma'lumot olishni hohlaganimizda har bir elementni querySelector qilib olib uning ichiga kiritilayotgan ma'lumotni olar edik.
Reactda ham ba'zan biror bir tegni querySelector yoki getElementById orqali olib unga nisbatan biror ish bajarish mumkin bo'ladi.
Xuddi shu yo'lni biz useState() lardan emas onChange dan emas xuddi Reactning useRef() hookidan foydalangan holda ushbu ma'lumotlarni olib ko'ramiz.
👇👇👇👇👇
useRef() hooki sahifani render qilmasdan turib ma'lumotni olishga imkon beradi.
useRef() ni reactdan import qildik. Endi esa quyidagi o'zgaruvchilarni e'lon qilamiz.
const title = useRef();
const date = useRef();
const location = useRef('fargona');
Va har bir input va selectlarga mos keladigan o'zgaruvchilarni ref attribyuti orqali berib chiqamiz.
<input type="text" ref={title} />
<input type="date" ref={date} />
<select ref={location}>
<option value="fergana">Farg'ona</option>
<option value="tashkent">Tashkent</option>
<option value="samarkand">Samarqand</option>
</select>
Endi esa event obyektini yaratish uchun o'zgaruvchilarni mos ravishda obyekt xossalariga tenglaymiz.
const event = {
title: title.current.value,
date: date.current.value,
location: location.current.value,
id: uuidv4()
}
Endi esa inputlarni reset qilib yuborish uchun resetInputs() funksiyasiga quyidagicha qiymatlar beramiz.
const resetInputs = () => {
title.current.value = '';
date.current.value = '';
location.current.value = '';
}
handleSubmit() funksiyasi to'liq:
const handleSubmit = (e) => {
e.preventDefault();
const event = {
title: title.current.value,
date: date.current.value,
location: location.current.value,
id: uuidv4()
}
newEvent(event)
resetInputs();
}
Bizda ortiqcha renderlarsiz useRef() orqali birorta bir tegni ushlab, o'sha tegni ref orqali ishlatib foydalanishimiz mumkin.
Odatda forma ichida bizda inputlar ko'payib ketsa har bir inputni tozalash uchun resetInputs() funksiyasiga qiymat yozib tashlay olmaymiz, quyidagi kabi:
setTitle('');
setDate('');
title.current.value = '';
date.current.value = '';
location.current.value = '';
Quyidagilarni amalga oshiramiz:
Formaning ref attribyutiga shu qiymatni beramiz.
<form ref = {form} className='new-event-form' onSubmit={handleSubmit}>
Bu xuddi biz formani querySelector orqali tanlab olishimizga teng.
resetInputs() funksiyasini quyidagicha o'zgartiramiz.