Kaip dirbate su formomis vieno puslapio programose…

Naudodamasis SPA formomis, naudoju valdomus (controlled) arba nekontroliuojamus (uncontrolled) komponentus.

Valdomi komponentai: Formos lauko reikšmė saugoma komponento būsenoje ir atnaujinama per setState.

// React valdomo formos komponento pavyzdys
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('Išsiųsta:', name);
  };

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

Privalumai valdomų komponentų:

Lengviau kontroliuoti ir validuoti įvestį.
Paprasčiau įgyvendinti sąlyginį laukų rodymą.
Patogu integruoti su būsenos valdymo bibliotekomis (Redux, Vuex).

Nekontroliuojami komponentai: Formos lauko reikšmė saugoma tiesiogiai DOM elemente, prie kurio prieinama per ref.

// React nekontroliuojamo formos komponento pavyzdys
import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Išsiųsta:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Vardas:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Siųsti</button>
    </form>
  );
}

Privalumai nekontroliuojamų komponentų:

Paprasčiau paprastoms formoms be sudėtingos logikos.
Mažiau kodo bazės realizacijai.

Bendros formų valdymo SPA:

Validacija:
- Kliento pusėje (JavaScript) greitam vartotojo atsiliepimui.
- Serverio pusėje duomenų vientisumui užtikrinti.
- Naudojant validacijos bibliotekas (Yup, Zod, VeeValidate, Vuelidate).
Siuntimo apdorojimas:
- Prevencijos default elgesio (event.preventDefault()).
- Duomenų siuntimas į serverį (Fetch API, Axios, XHR).
- Siuntimo būsenos rodymas (įkėlimas, sėkmė, klaida).
Būsenos valdymas:
- Vietinės komponento būsenos naudojimas.
- Sudėtingesniems formoms ar duomenims, naudojant būsenos valdymo sprendimus (Redux, Vuex, Pinia).
Vartotojo atsiliepimas:
- Įkėlimo indikatoriai.
- Validacijos klaidų pranešimai.
- Sėkmingo ar klaidų pranešimai.
Prieinamumas (A11y):
- Semantiniai HTML elementai (<form>, <label>, <input>, <button>).
- <label> susiejimas su atitinkamais įvesties laukais (atributas for arba įdėjimas viduje).
- WAI-ARIA atributų naudojimas, jei reikia.
Našumas:
- Debaunso arba trinktelių onChange įvykių valdymas dažnai keičiančiuose laukus.
- Optimizuoti rėdinimą keičiant formos būseną.
Testavimas:
- Vienetų testai formos logikai ir validacijai.
- Integraciniai testai sąveikai su API.

Pasirinkimas tarp valdomų ir nekontroliuojamų komponentų priklauso nuo formos sudėtingumo ir būsenos bei validacijos reikalavimų. Daugeliu atvejų, ypač sudėtingose formose, valdomi komponentai siūlo daugiau lankstumo ir kontrolės.

Kaip dirbate su formomis vieno puslapio programose (SPA)?