Bu modulda React’da forma bilan ishlash o’rganildi: boshqariluvchi maydonlar, yuborish va useRef.

Controlled input

React’da forma maydonining qiymati state’da yashaydi — bunga controlled input deyiladi:

const [ism, setIsm] = useState("");

<input
  type="text"
  value={ism}
  onChange={(e) => setIsm(e.target.value)}
/>

Aylanish doim bir xil: foydalanuvchi yozadi → onChange ishlaydi → e.target.value state’ga yoziladi → input yangi qiymatni ko’rsatadi. Endi qiymat istalgan payt qo’lda: tozalash — setIsm("") (reset naqshi), tekshirish, boshqa joyda ko’rsatish — hammasi state orqali.

Tipik xato. value berib onChange yozmaslik — maydon "qotib qoladi", chunki state o’zgarmayapti; konsolda ham ogohlantirish chiqadi.

onSubmit va uuidv4

Yuborish tugmasi emas, formaning o’zi tinglanadi:

const yubor = (e) => {
  e.preventDefault();
  const yangi = { id: uuidv4(), nom: ism };
  setRoyxat([...royxat, yangi]);
  setIsm("");
};

<form onSubmit={yubor}>...</form>

Natija: Enter ham, tugma ham bitta joydan o’tadi; sahifa qayta yuklanmaydi; ro’yxatga yangi element qo’shilib, maydon tozalanadi.

Uch muhim detal:

1. e.preventDefault() — brauzerning "formani yuborib sahifani yangilash" odatini to’xtatadi. Tipik xato: buni unutish — har submit’da butun ilova qayta yuklanib, state yo’qoladi.
2. uuidv4() (npm install uuid) — har elementga unikal id: key va o’chirish uchun ishonchli asos (massiv indeksi emas!).
3. Qo’shish [...royxat, yangi] — spread bilan yangi massiv; mavjudiga push qilinmaydi.

Select va options

<select value={daraja} onChange={(e) => setDaraja(e.target.value)}>
  <option value="junior">Boshlang'ich</option>
  <option value="middle">O'rta</option>
</select>

Xuddi input naqshi: value + onChange. HTML’dan farq: tanlangan qiymat selected atributi bilan emas, select’ning valuesi bilan boshqariladi.

useRef

useRef — DOM elementiga to’g’ridan-to’g’ri "tutqich":

const inputRef = useRef(null);

<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Fokus ber</button>

Natija: tugma bosilganda kursor maydonga sakraydi.

Ref’ning yana bir xossasi: qiymati o’zgarganda komponent qayta chizilmaydi — state’dan farqi shu. Qoida: ko’rinishga ta’sir qiladigan ma’lumot — state’da; DOM’ga texnik murojaat (fokus, o’lchov) — ref’da.

Amaliyot

1. "Mehmonlar ro’yxati" formasi: ism input, qo’shish tugmasi, ostida ro’yxat — to’liq controlled.
2. Formaga select qo’shing (mehmon toifasi) va qo’shilganda uuidv4 id bering.
3. Submit’dan keyin maydonni tozalab, useRef bilan fokusni qaytaring.
4. preventDefaultni ataylab olib tashlab nima bo’lishini ko’ring — keyin qaytarib qo’ying.

Modul testini ishlang — keyingi modul kursning eng muhim mavzusi: hook’lar va serverdan ma’lumot olish.