Wie arbeitest du mit Formularen in…

Bei der Arbeit mit Formularen in SPA verwende ich kontrollierte oder uncontrolled Komponenten.

Kontrollierte Komponenten: Der Wert des Formularfeldes wird im Zustand der Komponente gespeichert und über setState aktualisiert.

// Beispiel für eine kontrollierte Komponente 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('Gesendet:', name);
  };

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

Vorteile kontrollierter Komponenten:

Einfacher zu kontrollieren und zu validieren.
Einfacher, bedingte Logik für die Anzeige von Feldern zu implementieren.
Einfach in mit State-Management-Bibliotheken wie Redux oder Vuex zu integrieren.

Unkontrollierte Komponenten: Der Wert des Formularfeldes wird direkt im DOM-Element gespeichert und über ref zugänglich gemacht.

// Beispiel für eine uncontrolled Komponente in React
import React, { useRef } from 'react';

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

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

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

Vorteile unkontrollierter Komponenten:

Einfacher für einfache Formulare ohne komplexe Logik.
Weniger Code für die Grundimplementierung.

Allgemeine Ansätze bei der Arbeit mit Formularen in SPA:

Validierung:
- Auf Client-Seite (JavaScript) für sofortiges Feedback.
- Auf Server-Seite zur Gewährleistung der Datenintegrität.
- Verwendung von Validierungsbibliotheken (Yup, Zod, VeeValidate, Vuelidate).
Verarbeitung des Sendens:
- Verhindern des Standardverhaltens (event.preventDefault()).
- Daten an den Server senden (Fetch API, Axios, XHR).
- Anzeige des Sendestatus (Laden, Erfolg, Fehler).
Zustandsverwaltung:
- Verwendung des lokalen Zustands der Komponente.
- Verwendung von Zustandsmanagern (Redux, Vuex, Pinia) für komplexe Formulare oder solche, die in anderen Teilen der Anwendung verwendet werden.
Benutzerfeedback:
- Ladeindikatoren.
- Validierungsfehlermeldungen.
- Erfolg-/Fehlernachrichten bei der Übermittlung.
Barrierefreiheit (A11y):
- Verwendung semantischer HTML-Elemente (<form>, <label>, <input>, <button>).
- Verknüpfung von <label> mit den entsprechenden Eingabefeldern (Attribut for oder Verschachtelung).
- Verwendung von WAI-ARIA-Attributen bei Bedarf.
Leistung:
- Debouncing oder Throttling von onChange-Ereignissen bei häufigen Änderungen.
- Optimierung des Renderings bei Zustandsänderungen des Formulars.
Testen:
- Unit-Tests für die Logik des Formulars und die Validierung.
- Integrationstests für die Interaktion des Formulars mit der API.

Die Wahl zwischen kontrollierten und uncontrolled Komponenten hängt von der Komplexität des Formulars und den Anforderungen an Zustandsmanagement und Validierung ab. Für die meisten Formulare, insbesondere komplexe, bieten kontrollierte Komponenten mehr Flexibilität und Kontrolle.

Wie arbeitest du mit Formularen in Single-Page-Anwendungen (SPA)?