Jak pracujete s formuláři v jednostránkových…

Při práci s formuláři v SPA používám řízené (controlled) nebo neřízené (uncontrolled) komponenty.

Řízené komponenty: Hodnota pole formuláře je uložena v stavu komponenty a aktualizuje se přes setState.

// Příklad řízené komponenty formuláře 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('Odesláno:', name);
  };

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

Výhody řízených:

Snadnější kontrola a validace vstupu.
Jednodušší implementace podmíněného zobrazování polí.
Snadná integrace s knihovnami pro správu stavu (Redux, Vuex).

Neřízené komponenty: Hodnota pole formuláře je přímo v DOM elementu a přistupuje se přes ref.

// Příklad neřízené komponenty formuláře v React
import React, { useRef } from 'react';

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

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

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Jméno:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Odeslat</button>
    </form>
  );
}

Výhody neřízených:

Jednodušší pro jednoduché formuláře bez složité logiky.
Méně kódu pro základní implementaci.

Obecné přístupy při práci s formuláři v SPA:

Validace:
- Na straně klienta (JavaScript) pro okamžitou zpětnou vazbu uživateli.
- Na straně serveru pro zajištění integrity dat.
- Použití knihoven pro validaci (Yup, Zod, VeeValidate, Vuelidate).
Zpracování odeslání:
- Zabránění výchozímu chování (event.preventDefault()).
- Odeslání dat na server (Fetch API, Axios, XHR).
- Zobrazení stavu odeslání (načítání, úspěch, chyba).
Správa stavu:
- Použití lokálního stavu komponenty.
- Použití správců stavu (Redux, Vuex, Pinia) pro složitější formuláře nebo formuláře, které jsou používány v jiných částech aplikace.
Zpětná vazba uživateli:
- Indikátory načítání.
- Zprávy o validačních chybách.
- Zprávy o úspěchu/chybě odeslání.
Přístupnost (A11y):
- Použití sémantických HTML prvků (<form>, <label>, <input>, <button>).
- Propojení <label> s odpovídajícími vstupními poli (for atribut nebo vnoření).
- Použití WAI-ARIA atributů podle potřeby.
Výkon:
- Debouncing nebo throttling událostí onChange u polí s častými změnami.
- Optimalizace renderování při změně stavu formuláře.
Testování:
- Jednotkové testy pro logiku formuláře a validaci.
- Integrační testy pro interakci formuláře s API.

Volba mezi řízenými a neřízenými komponentami závisí na složitosti formuláře a požadavcích na správu stavu a validaci. Pro většinu formulářů, zejména složitých, nabízejí řízené komponenty větší flexibilitu a kontrolu.

Jak pracujete s formuláři v jednostránkových aplikacích (SPA)?