Πώς δουλεύεις με φόρμες σε εφαρμογές μιας σελίδας…

Χρησιμοποιώ ελεγχόμενα (controlled) ή ανεξέλεγκτα (uncontrolled) συστατικά όταν εργάζομαι με φόρμες σε SPA.

Ελεγχόμενα συστατικά: Η τιμή του πεδίου φόρμας αποθηκεύεται στην κατάσταση του συστατικού και ενημερώνεται μέσω του setState.

// Παράδειγμα ελεγχόμενου συστατικού φόρμας σε 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('Αποστολή:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Όνομα:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Αποστολή</button>
    </form>
  );
}

Πλεονεκτήματα των ελεγχόμενων:

Πιο εύκολο να ελέγξετε και να επικυρώσετε την εισαγωγή.
Ευκολότερη υλοποίηση λογικής συνθήκης εμφάνισης πεδίων.
Ευκολία ενσωμάτωσης με βιβλιοθήκες διαχείρισης κατάστασης (Redux, Vuex).

Ανεξέλεγκτα συστατικά: Η τιμή του πεδίου φόρμας αποθηκεύεται άμεσα στο DOM στοιχείο και προσπελαύνεται μέσω του ref.

// Παράδειγμα ανεξέλεγκτου συστατικού φόρμας σε React
import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Αποστολή:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Όνομα:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Αποστολή</button>
    </form>
  );
}

Πλεονεκτήματα των ανεξέλεγκτων:

Πιο απλό για απλές φόρμες χωρίς πολύπλοκη λογική.
Λιγότερος κώδικας για βασική υλοποίηση.

Γενικές προσεγγίσεις στη διαχείριση φορμών σε SPA:

Επικύρωση:
- Στην πλευρά του πελάτη (JavaScript) για άμεση ανατροφοδότηση.
- Στην πλευρά του διακομιστή για διασφάλιση ακεραιότητας δεδομένων.
- Χρήση βιβλιοθηκών επικύρωσης (Yup, Zod, VeeValidate, Vuelidate).
Επεξεργασία αποστολής:
- Αποτροπή της προεπιλεγμένης συμπεριφοράς (event.preventDefault()).
- Αποστολή δεδομένων στον διακομιστή (Fetch API, Axios, XHR).
- Εμφάνιση κατάστασης αποστολής (φόρτωση, επιτυχία, σφάλμα).
Διαχείριση κατάστασης:
- Χρήση τοπικής κατάστασης του συστατικού.
- Χρήση διαχειριστών κατάστασης (Redux, Vuex, Pinia) για πιο πολύπλοκες φόρμες ή φόρμες που χρησιμοποιούνται σε άλλα μέρη της εφαρμογής.
Ανατροφοδότηση στον χρήστη:
- Δείκτες φόρτωσης.
- Μηνύματα επικύρωσης σφαλμάτων.
- Μηνύματα επιτυχίας/σφάλματος αποστολής.
Προσβασιμότητα (A11y):
- Χρήση σημασιολογικών HTML στοιχείων (<form>, <label>, <input>, <button>).
- Σύνδεση <label> με τα αντίστοιχα πεδία εισαγωγής (α attribute for ή εσωτερική τοποθέτηση).
- Χρήση WAI-ARIA attribute αν χρειάζεται.
Απόδοση:
- Debouncing ή throttling των γεγονότων onChange για πεδία με συχνές αλλαγές.
- Βελτιστοποίηση της ανανέωσης κατά την αλλαγή της κατάστασης της φόρμας.
Δοκιμές:
- Μονάδες δοκιμών για τη λογική της φόρμας και την επικύρωση.
- Ολοκληρωμένες δοκιμές για την αλληλεπίδραση της φόρμας με το API.

Η επιλογή μεταξύ ελεγχόμενων και ανεξέλεγκτων συστατικών εξαρτάται από την πολυπλοκότητα της φόρμας και τις απαιτήσεις διαχείρισης κατάστασης και επικύρωσης. Για τις περισσότερες φόρμες, ειδικά τις πολύπλοκες, τα ελεγχόμενα συστατικά προσφέρουν μεγαλύτερη ευελιξία και έλεγχο.

Πώς δουλεύεις με φόρμες σε εφαρμογές μιας σελίδας (SPA);