Kuidas sa töötad vormidega üheleheküljelistes…

SPA-formidega töötades kasutan kontrollitud (controlled) või kontrollimata (uncontrolled) komponente.

Kontrollitud komponendid: Forma väli hoitakse komponendi olekus ja uuendatakse setState kaudu.

// React kontrollitud vormi näide
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('Saadetud:', name);
  };

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

Kontrollitud komponentide eelised:

Lihtsam kontrollida ja valideerida sisendit.
Lihtsam tingimusliku väljade kuvamise loogika.
Mugav integreerida seisundi haldamise teekidega (Redux, Vuex).

Kontrollimata komponendid: Välja väärtus hoitakse otse DOM-elemendis, millele pääseb ligi ref kaudu.

// React kontrollimata vormi näide
import React, { useRef } from 'react';

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

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

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

Nekontrollitud komponentide eelised:

Lihtsamad lihtsate vormide jaoks ilma keerulise loogikata.
Vähem koodi põhitegevuseks.

Üldised lähenemised SPA-formidega töötamisel:

Valideerimine:
- Klientide (JavaScript) poolel kiire tagasiside kasutajale.
- Serveri poolel andmete terviklikkuse tagamiseks.
- Valideerimise teekide kasutamine (Yup, Zod, VeeValidate, Vuelidate).
Saadetise töötlemine:
- Vaikimisi käitumise vältimine (event.preventDefault()).
- Andmete saatmine serverile (Fetch API, Axios, XHR).
- Saatmise staatuse näitamine (laadimine, edu, viga).
Oleku haldamine:
- Kohalik komponendi oleku kasutamine.
- Keerukamate vormide või andmete jaoks kasutades oleku haldamise raamistikke (Redux, Vuex, Pinia).
Kasutaja tagasiside:
- Laadimisindikaatorid.
- Valiatsioonivigade sõnumid.
- Edu või vea sõnumid.
Ligipääsetavus (A11y):
- Semantiliste HTML-elementide kasutamine (<form>, <label>, <input>, <button>).
- <label> sidumine vastavate sisenditega (atribuut for või sisestus).
- WAI-ARIA atribuutide kasutamine vajadusel.
Tõhusus:
- Debouncing või throttling onChange sündmusi sagedaste muutuste korral.
- Rerenderimise optimeerimine vormi oleku muutmisel.
Testimine:
- Üksuse testid vormi loogikale ja valideerimisele.
- Integreerimistestid API-ga suhtlemiseks.

Valik kontrollitud ja kontrollimata komponentide vahel sõltub vormi keerukusest ning oleku ja valideerimise nõuetest. Enamikel juhtudel, eriti keerukates vormides, pakuvad kontrollitud komponendid suuremat paindlikkust ja kontrolli.

Kuidas sa töötad vormidega üheleheküljelistes rakendustes (SPA)?