Bir sahifa ilovalarida (SPA) shakllar bilan qanday…

SPA-da formalar bilan ishlashda, nazorat qilinadigan yoki nazorat qilinmaydigan komponentlardan foydalanaman.

Nazorat qilinadigan komponentlar: Formadagi maydonning qiymati komponent holatida saqlanadi va setState orqali yangilanadi.

// Reactda nazorat qilinadigan komponent misoli
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Yuborildi:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ism:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Yuborish</button>
    </form>
  );
}

Nazorat qilinadigan komponentlarning afzalliklari:

Kiritishni boshqarish va tekshirish osonroq.
Shartli ravishda maydonlarni ko'rsatish logikasini oson amalga oshirish.
Redux, Vuex kabi holat boshqarish kutubxonalari bilan integratsiya qilish qulay.

Nazorat qilinmaydigan komponentlar: Formadagi maydonning qiymati to'g'ridan-to'g'ri DOM elementida saqlanadi va ref orqali kirish mumkin.

// Reactda nazorat qilinmaydigan komponent misoli
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Yuborildi:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ism:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Yuborish</button>
    </form>
  );
}

Nazorat qilinmaydigan komponentlarning afzalliklari:

Oddiy shakllar uchun qulay, murakkab logika talab qilmaydi.
Asosiy implementatsiya uchun kamroq kod.

SPA-da shakllar bilan ishlash yondashuvlari:

Validatsiya:
- Mijoz tomonida (JavaScript) darhol fikr-mulohaza uchun.
- Server tomonida ma'lumotlarning yaxlitligini ta'minlash uchun.
- Yup, Zod, VeeValidate, Vuelidate kabi kutubxonalar.
Yuborishni boshqarish:
- Standart xatti-harakatlarni oldini olish (event.preventDefault()).
- Ma'lumotlarni serverga yuborish (Fetch API, Axios, XHR).
- Yuborish holatini ko'rsatish (yuklanmoqda, muvaffaqiyat, xato).
Holatni boshqarish:
- Komponentning mahalliy holati.
- Murakkab shakllar yoki boshqa joylarda foydalaniladigan shakllar uchun Redux, Vuex, Pinia.
Foydalanuvchiga fikr-mulohaza:
- Yuklanish indikatorlari.
- Validatsiya xato xabarlari.
- Yuborish muvaffaqiyati/xatosi xabarlari.
Kirish uchun qulaylik (A11y):
- Semantik HTML elementlaridan foydalanish (<form>, <label>, <input>, <button>).
- <label>ni mos kirish maydonlariga bog'lash (for atributi yoki ichma-ich joylashish).
- Zarur bo'lsa, WAI-ARIA atributlaridan foydalanish.
Performans:
- Ko'p o'zgaradigan maydonlar uchun onChange voqealarini debounce yoki throttle qilish.
- Holat o'zgarishlariga mos ravishda renderni optimallashtirish.
Testlar:
- Formaning mantiqi va validatsiya uchun birlik testlar.
- API bilan o'zaro ta'sir uchun integratsiya testlari.

Kontrolli va nazorat qilinmaydigan komponentlar orasidagi tanlov, formaning murakkabligiga va holatni boshqarish va validatsiya talablariga bog'liq. Ko'pchilik uchun, ayniqsa murakkablar, kontrolli komponentlar ko'proq moslashuvchanlik va nazoratni ta'minlaydi.

Bir sahifa ilovalarida (SPA) shakllar bilan qanday ishlaysiz?