Jak pracujesz z formularzami w aplikacjach…

Pracując z formularzami w SPA, używam kontrolowanych lub niekontrolowanych komponentów.

Kontrolowane komponenty: Wartość pola formularza jest przechowywana w stanie komponentu i aktualizowana za pomocą setState.

// Przykład kontrolowanego komponentu w React
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('Wysłano:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Imię:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Wyślij</button>
    </form>
  );
}

Zalety komponentów kontrolowanych:

Łatwiejsza kontrola i walidacja wprowadzanych danych.
Prostsza implementacja logiki warunkowego wyświetlania pól.
Łatwa integracja z bibliotekami zarządzania stanem (Redux, Vuex).

Komponenty niekontrolowane: Wartość pola formularza jest przechowywana bezpośrednio w elemencie DOM, do którego dostęp uzyskuje się przez ref.

// Przykład niekontrolowanego komponentu w React
import React, { useRef } from 'react';

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

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

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Imię:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Wyślij</button>
    </form>
  );
}

Zalety komponentów niekontrolowanych:

Prostsze dla prostych formularzy bez złożonej logiki.
Mniej kodu do podstawowej implementacji.

Ogólne podejścia przy pracy z formularzami w SPA:

Walidacja:
- Po stronie klienta (JavaScript) dla natychmiastowej informacji zwrotnej.
- Po stronie serwera dla zapewnienia integralności danych.
- Użycie bibliotek walidacyjnych (Yup, Zod, VeeValidate, Vuelidate).
Obsługa wysyłki:
- Zapobieganie domyślnemu zachowaniu (event.preventDefault()).
- Wysyłanie danych do serwera (Fetch API, Axios, XHR).
- Wyświetlanie statusu wysyłki (ładowanie, sukces, błąd).
Zarządzanie stanem:
- Użycie lokalnego stanu komponentu.
- Użycie menedżerów stanów (Redux, Vuex, Pinia) dla złożonych formularzy lub tych używanych w innych częściach aplikacji.
Informacja zwrotna dla użytkownika:
- Wskaźniki ładowania.
- Komunikaty o błędach walidacji.
- Komunikaty o sukcesie/błędach wysyłki.
Dostępność (A11y):
- Użycie semantycznych elementów HTML (<form>, <label>, <input>, <button>).
- Powiązanie <label> z odpowiednimi polami wejściowymi (atrybut for lub zagnieżdżenie).
- Użycie atrybutów WAI-ARIA w razie potrzeby.
Wydajność:
- Debounce lub throttling zdarzeń onChange dla pól z częstymi zmianami.
- Optymalizacja renderowania przy zmianie stanu formularza.
Testowanie:
- Testy jednostkowe dla logiki formularza i walidacji.
- Testy integracyjne dla interakcji formularza z API.

Wybór między komponentami kontrolowanymi a niekontrolowanymi zależy od złożoności formularza i wymagań dotyczących zarządzania stanem i walidacji. Dla większości formularzy, zwłaszcza tych złożonych, komponenty kontrolowane oferują większą elastyczność i kontrolę.

Jak pracujesz z formularzami w aplikacjach jednostronicowych (SPA)?