Hoe werk je met formulieren in single-page…

Bij het werken met formulieren in SPA gebruik ik gecontroleerde (controlled) of niet-gecontroleerde (uncontrolled) componenten.

Gecontroleerde componenten: De waarde van het formulier veld wordt opgeslagen in de toestand van het component en wordt bijgewerkt via setState.

// Voorbeeld van een gecontroleerd component in 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('Verzonden:', name);
  };

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

Voordelen van gecontroleerde componenten:

Makkelijker te controleren en te valideren.
Eenvoudiger logica voor voorwaardelijke weergave van velden.
Gemakkelijk te integreren met state management libraries (Redux, Vuex).

Niet-gecontroleerde componenten: De waarde van het formulier veld wordt direct in het DOM-element opgeslagen en toegankelijk via ref.

// Voorbeeld van een niet-gecontroleerd component in React
import React, { useRef } from 'react';

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

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

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

Voordelen van niet-gecontroleerde componenten:

Eenvoudiger voor eenvoudige formulieren zonder complexe logica.
Minder code voor basisimplementatie.

Algemene aanpak bij werken met formulieren in SPA:

Validatie:
- Aan de clientzijde (JavaScript) voor directe feedback.
- Aan de serverzijde voor dataintegriteit.
- Gebruik van validatiebibliotheken (Yup, Zod, VeeValidate, Vuelidate).
Verwerking van verzending:
- Voorkomen van standaard gedrag (event.preventDefault()).
- Gegevens naar server sturen (Fetch API, Axios, XHR).
- Weergave van verzendstatus (laden, succes, fout).
Staatbeheer:
- Gebruik van lokale componentstatus.
- Gebruik van state managers (Redux, Vuex, Pinia) voor complexe formulieren of formulieren die elders worden gebruikt.
Gebruikersfeedback:
- Laadindicatoren.
- Validatiefoutenberichten.
- Succes-/foutberichten bij verzending.
Toegankelijkheid (A11y):
- Gebruik van semantische HTML-elementen (<form>, <label>, <input>, <button>).
- Koppeling van <label> aan de juiste invoervelden (attribuut for of nesting).
- Gebruik van WAI-ARIA-attributen indien nodig.
Prestaties:
- Debounce of throttling van onChange-gebeurtenissen voor velden met frequente wijzigingen.
- Optimalisatie van rendering bij wijziging van formulierstatus.
Testen:
- Unit-tests voor logica en validatie.
- Integratietests voor interactie van formulier met API.

De keuze tussen gecontroleerde en niet-gecontroleerde componenten hangt af van de complexiteit van het formulier en de eisen aan staatbeheer en validatie. Voor de meeste formulieren, vooral complexe, bieden gecontroleerde componenten meer flexibiliteit en controle.

Hoe werk je met formulieren in single-page applicaties (SPA)?