Ako pracujete s formulármi v jednostránkových…

Pri práci s formulármi v SPA používam riadené (controlled) alebo ne riadené (uncontrolled) komponenty.

Riadené komponenty: Hodnota poľa formulára sa uchováva v stave komponentu a aktualizuje sa cez setState.

// Príklad riadenej komponenty formulára v 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('Odoslané:', name);
  };

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

Výhody riadených:

Jednoduchšie je kontrolovať a validovať vstup.
Jednoduchšie je implementovať podmienečné zobrazovanie polí.
Jednoduchá integrácia s knižnicami na správu stavu (Redux, Vuex).

Neriadené komponenty: Hodnota poľa formulára sa priamo uchováva v DOM elemente a pristupuje sa cez ref.

// Príklad neriadenej komponenty formulára v React
import React, { useRef } from 'react';

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

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

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

Výhody neriadených:

Jednoduchšie pre jednoduché formuláre bez zložitej logiky.
Menej kódu pre základnú implementáciu.

Všeobecné prístupy pri práci s formulármi v SPA:

Validácia:
- Na strane klienta (JavaScript) pre okamžitú spätnú väzbu používateľa.
- Na strane servera pre zabezpečenie integrity dát.
- Použitie knižníc na validáciu (Yup, Zod, VeeValidate, Vuelidate).
Spracovanie odoslania:
- Zabraňovanie predvolenému správaniu (event.preventDefault()).
- Odoslanie dát na server (Fetch API, Axios, XHR).
- Zobrazenie stavu odoslania (načítanie, úspech, chyba).
Správa stavu:
- Použitie lokálneho stavu komponentu.
- Použitie manažérov stavu (Redux, Vuex, Pinia) pre zložitejšie formuláre alebo formuláre, ktoré sa používajú v iných častiach aplikácie.
Spätná väzba používateľovi:
- Indikátory načítania.
- Správy o validačných chybách.
- Správy o úspechu/chybách odoslania.
Prístupnosť (A11y):
- Použitie sémantických HTML prvkov (<form>, <label>, <input>, <button>).
- Prepojenie <label> s príslušnými poľami na zadávanie (for atribút alebo vloženie).
- Použitie WAI-ARIA atribútov podľa potreby.
Výkon:
- Debouncing alebo throttling udalostí onChange pre polia s častými zmenami.
- Optimalizácia renderovania pri zmene stavu formulára.
Testovanie:
- Jednotkové testy pre logiku formulára a validáciu.
- Integračné testy pre interakciu formulára s API.

Voľba medzi riadenými a neriadenými komponentmi závisí od zložitosti formulára a požiadaviek na správu stavu a validáciu. Pre väčšinu formulárov, najmä zložitých, ponúkajú riadené komponenty väčšiu flexibilitu a kontrolu.

Ako pracujete s formulármi v jednostránkových aplikáciách (SPA)?