Bir səhifəlik tətbiqlərdə (SPA) formalarla necə…

SPA-da formalarla işləyərkən idarə olunan (controlled) və ya idarə olunmayan (uncontrolled) komponentlərdən istifadə edirəm.

İdarə olunan komponentlər: Form sahəsinin dəyəri komponentin vəziyyətində saxlanılır və setState vasitəsilə yenilənir.

// React-də idarə olunan form komponentinin nümunəsi
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('Göndərildi:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ad:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Göndər</button>
    </form>
  );
}

İdarə olunanların üstünlükləri:

Daxil edilən məlumatı daha asan idarə etmək və yoxlamaq.
Şərti olaraq sahələrin göstərilməsini asanlıqla idarə etmək.
State idarəetmə kitabxanaları ilə (Redux, Vuex) inteqrasiya etmək rahatdır.

İdarə olunmayan komponentlər: Form sahəsinin dəyəri birbaşa DOM elementində saxlanılır və ref vasitəsilə əldə edilir.

// React-də idarə olunmayan form komponentinin nümunəsi
import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Göndərildi:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Ad:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Göndər</button>
    </form>
  );
}

İdarə olunmayanların üstünlükləri:

Sadə formalar üçün daha əlverişlidir.
Əsasən sadə və az kod tələb edən hallarda istifadə olunur.

SPA-da formalarla işləmək üçün ümumi yanaşmalar:

Yoxlama:
- Müştəri tərəfində (JavaScript) istifadəçiyə dərhal geribildirim üçün.
- Server tərəfində məlumatların bütövlüyünü təmin etmək üçün.
- Yoxlama kitabxanaları (Yup, Zod, VeeValidate, Vuelidate) istifadə edilə bilər.
Göndərmənin işlənməsi:
- Default davranışın qarşısını almaq (event.preventDefault()).
- Məlumatların serverə göndərilməsi (Fetch API, Axios, XHR).
- Göndərmə statusunun göstərilməsi (yükləmə, uğur, xəta).
Vəziyyətin idarə olunması:
- Komponentin lokal vəziyyətindən istifadə.
- Daha mürəkkəb formalar və ya digər hissələrdə istifadə edilən məlumatlar üçün vəziyyət menecerlərindən (Redux, Vuex, Pinia) istifadə.
İstifadəçiyə geribildirim:
- Yükləmə göstəriciləri.
- Yoxlama xətaları barədə mesajlar.
- Göndərmə uğuru və ya xətası barədə mesajlar.
Əlçatanlıq (A11y):
- Semantik HTML elementlərindən istifadə (<form>, <label>, <input>, <button>).
- <label> ilə uyğun sahələri əlaqələndirmək (atribut for və ya iç içə yerləşdirmə).
- Lazım gəldikdə WAI-ARIA atributlarından istifadə.
Performans:
- Dəyişikliklər zamanı onChange hadisələrini debounce və ya throttle etmək.
- Vəziyyət dəyişdikcə render optimizasiyası.
Testlər:
- Formanın və yoxlamanın loqikasını test edən unit testlər.
- API ilə qarşılıqlı əlaqəni test edən inteqrasiya testləri.

İdarə olunan və ya idarə olunmayan komponentlər arasında seçim formanın mürəkkəbliyindən və vəziyyət və yoxlama tələblərindən asılıdır. Əksər hallarda, xüsusən mürəkkəb formalar üçün idarə olunan komponentlər daha çox elastiklik və nəzarət təmin edir.

Bir səhifəlik tətbiqlərdə (SPA) formalarla necə işləyirsiniz?