Kā jūs strādājat ar formām vienas lapas…

Izmantojot SPA formu darbā, es izmantoju kontrolētas (controlled) vai nekontrolētas (uncontrolled) komponentes.

Kontrolētas komponentes: Formas lauks tiek glabāts komponentes stāvoklī un tiek atjaunināts ar setState.

// React kontrolētas formas piemērs
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('Nosūtīts:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Vārds:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Nosūtīt</button>
    </form>
  );
}

Priekšrocības kontrolētiem komponentiem:

Viegli kontrolēt un validēt ievadi.
Vienkāršāk īstenot nosacījuma lauku rādīšanu.
Ērti integrēt ar stāvokļa pārvaldības bibliotēkām (Redux, Vuex).

Nekontrolētas komponentes: Formas lauka vērtība tiek glabāta tieši DOM elementā, piekļūstot caur ref.

// React nekontrolētas formas piemērs
import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Nosūtīts:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Vārds:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Nosūtīt</button>
    </form>
  );
}

Priekšrocības nekontrolētiem komponentiem:

Vienkāršākas mazām formām bez sarežģītas loģikas.
Mazāk koda bāzes realizācijai.

Kopējās pieejas SPA formu darbā:

Validācija:
- Klienta pusē (JavaScript) ātrai atsauksmei.
- Servera pusē datu integritātes nodrošināšanai.
- Ar validācijas bibliotēkām (Yup, Zod, VeeValidate, Vuelidate).
Sūtīšanas apstrāde:
- Novērst noklusējuma uzvedību (event.preventDefault()).
- Datu sūtīšana uz serveri (Fetch API, Axios, XHR).
- Sūtīšanas statusa rādīšana (ielāde, panākumi, kļūda).
Stāvokļa pārvaldība:
- Vietējās komponentes stāvokļa izmantošana.
- Sarežģītākiem formiem vai datiem, izmantojot stāvokļa pārvaldības risinājumus (Redux, Vuex, Pinia).
Lietotāja atsauksme:
- Ielādes indikatorus.
- Validācijas kļūdu ziņojumus.
- Veiksmīgas vai kļūdas ziņojumus.
Pieejamība (A11y):
- Semantiski HTML elementi (<form>, <label>, <input>, <button>).
- <label> sasaistīšana ar atbilstošajiem ievades laukiem (atribūts for vai iekšēja iekļaušana).
- WAI-ARIA atribūtu izmantošana, ja nepieciešams.
Veiktspēja:
- Debaunsošana vai trinkteli onChange notikumos bieži mainīgos laukos.
- Rādītāja optimizācija, mainot formu stāvokli.
Testēšana:
- Vienību testi formu loģikai un validācijai.
- Integrācijas testi ar API.

Izvēle starp kontrolētiem un nekontrolētiem komponentiem ir atkarīga no formas sarežģītības un stāvokļa un validācijas prasībām. Lielākajā daļā gadījumu, īpaši sarežģītās formās, kontrolēti komponenti nodrošina lielāku elastību un kontroli.

Kā jūs strādājat ar formām vienas lapas lietojumprogrammās (SPA)?