Formulaires React : champs contrôlés, Actions et useActionState

const [libelle, setLibelle] = useState('');

<input id="libelle" value={libelle} onChange={(e) => setLibelle(e.target.value)} />

import { useState, type ChangeEvent, type FormEvent } from 'react';
import type { NouveauFrais } from '../types';

type Saisie = { date: string; libelle: string; montant: string };
const VIDE: Saisie = { date: '', libelle: '', montant: '' };

export function FormulaireControle({ onAjouter }: { onAjouter: (frais: NouveauFrais) => void }) {
  const [saisie, setSaisie] = useState<Saisie>(VIDE);
  const [erreur, setErreur] = useState<string | null>(null);

  function changer(e: ChangeEvent<HTMLInputElement>) {
    const { name, value } = e.target;
    setSaisie({ ...saisie, [name]: value });   // [name] : la clé vient de l'attribut name du champ
  }

  function soumettre(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();   // sinon le navigateur recharge la page
    const montant = Number(saisie.montant);
    if (saisie.libelle.trim() === '') return setErreur('Le libellé est obligatoire.');
    if (!(montant > 0)) return setErreur('Le montant doit être supérieur à 0.');
    onAjouter({ date: saisie.date, libelle: saisie.libelle.trim(), montant });
    setSaisie(VIDE);
    setErreur(null);
  }

  const restants = 50 - saisie.libelle.length;

  return (
    <form onSubmit={soumettre} noValidate>
      <label htmlFor="c-date">Date</label>
      <input id="c-date" name="date" type="date" value={saisie.date} onChange={changer} />
      <label htmlFor="c-libelle">Libellé</label>
      <input id="c-libelle" name="libelle" maxLength={50} value={saisie.libelle} onChange={changer} />
      <p>{restants} caractères restants</p>
      <label htmlFor="c-montant">Montant (€)</label>
      <input id="c-montant" name="montant" type="number" step="0.01" value={saisie.montant} onChange={changer} />
      {erreur && <p role="alert">{erreur}</p>}
      <button type="submit">Ajouter</button>
    </form>
  );
}

const [justificatif, setJustificatif] = useState(false);

<input
  id="justificatif"
  type="checkbox"
  checked={justificatif}
  onChange={(e) => setJustificatif(e.target.checked)}
/>
<label htmlFor="justificatif">Justificatif fourni</label>

async function enregistrer(formData: FormData) {
  const frais = {
    date: String(formData.get('date')),
    libelle: String(formData.get('libelle')),
    montant: Number(formData.get('montant')),
  };
  await ajouterFrais(12, frais);
}

<form action={enregistrer}>
  <input name="date" type="date" required />
  <input name="libelle" required />
  <input name="montant" type="number" step="0.01" required />
  <button type="submit">Ajouter</button>
</form>

const [etat, action, enCours] = useActionState(fonction, etatInitial);

// src/components/FormulaireFrais.tsx
import { useActionState } from 'react';
import { ajouterFrais } from '../api/fiches';
import { ApiError } from '../api/client';
import type { NouveauFrais } from '../types';

type EtatFormulaire = {
  erreur: string | null;
  saisie: NouveauFrais;   // pour réafficher la saisie après une erreur
};

const VIDE: NouveauFrais = { date: '', libelle: '', montant: 0 };

export function FormulaireFrais({ ficheId }: { ficheId: number }) {
  async function enregistrer(_precedent: EtatFormulaire, formData: FormData): Promise<EtatFormulaire> {
    const saisie: NouveauFrais = {
      date: String(formData.get('date')),
      libelle: String(formData.get('libelle')).trim(),
      montant: Number(formData.get('montant')),
    };
    if (saisie.libelle === '') return { erreur: 'Le libellé est obligatoire.', saisie };
    if (!(saisie.montant > 0)) return { erreur: 'Le montant doit être supérieur à 0.', saisie };
    try {
      await ajouterFrais(ficheId, saisie);
      return { erreur: null, saisie: VIDE };
    } catch (e) {
      const message = e instanceof ApiError ? e.message : 'Le serveur ne répond pas, réessaie.';
      return { erreur: message, saisie };
    }
  }

  const [etat, action, enCours] = useActionState(enregistrer, { erreur: null, saisie: VIDE });

  return (
    <form action={action} aria-describedby={etat.erreur ? 'erreur-frais' : undefined}>
      <h2>Ajouter un frais hors forfait</h2>
      <p>
        <label htmlFor="date">Date</label>
        <input id="date" name="date" type="date" required defaultValue={etat.saisie.date} />
      </p>
      <p>
        <label htmlFor="libelle">Libellé</label>
        <input id="libelle" name="libelle" required defaultValue={etat.saisie.libelle} />
      </p>
      <p>
        <label htmlFor="montant">Montant (€)</label>
        <input id="montant" name="montant" type="number" step="0.01" min="0.01" required
          defaultValue={etat.saisie.montant || ''} />
      </p>
      {etat.erreur && <p id="erreur-frais" role="alert">{etat.erreur}</p>}
      <button type="submit" disabled={enCours}>
        {enCours ? 'Enregistrement…' : 'Ajouter le frais'}
      </button>
    </form>
  );
}

import { useFormStatus } from 'react-dom';

export function BoutonEnvoyer({ libelle }: { libelle: string }) {
  const { pending } = useFormStatus();   // l'état du <form> parent
  return <button type="submit" disabled={pending}>{pending ? 'Envoi…' : libelle}</button>;
}

const [valeurAffichee, ajouterOptimiste] = useOptimistic(valeurReelle, fusion);

import { startTransition, useOptimistic, useState } from 'react';
import { ajouterFrais } from '../api/fiches';
import { BoutonEnvoyer } from './BoutonEnvoyer';
import type { Frais, NouveauFrais } from '../types';

type FraisAffiche = Frais & { enAttente?: boolean };

export function FraisOptimistes({ ficheId, fraisInitiaux }: { ficheId: number; fraisInitiaux: Frais[] }) {
  const [frais, setFrais] = useState<Frais[]>(fraisInitiaux);
  const [erreur, setErreur] = useState<string | null>(null);
  const [fraisAffiches, ajouterOptimiste] = useOptimistic<FraisAffiche[], FraisAffiche>(
    frais,
    (liste, nouveau) => [...liste, nouveau],
  );

  async function action(formData: FormData) {
    const saisie: NouveauFrais = {
      date: String(formData.get('date')),
      libelle: String(formData.get('libelle')),
      montant: Number(formData.get('montant')),
    };
    setErreur(null);
    ajouterOptimiste({ ...saisie, id: -Date.now(), enAttente: true });   // affiché tout de suite
    try {
      const cree = await ajouterFrais(ficheId, saisie);
      startTransition(() => setFrais((liste) => [...liste, cree]));      // la vraie valeur
    } catch (e) {
      setErreur(e instanceof Error ? e.message : 'Échec de l’enregistrement.');
      // rien d'autre à faire : la ligne optimiste disparaît quand l'action se termine
    }
  }

  return (
    <>
      <ul>
        {fraisAffiches.map((f) => (
          <li key={f.id}>
            {f.libelle} : {f.montant} €{f.enAttente && ' (envoi…)'}
          </li>
        ))}
      </ul>
      {erreur && <p role="alert">{erreur}</p>}
      <form action={action}>
        <input name="date" type="date" aria-label="Date" required />
        <input name="libelle" aria-label="Libellé" required />
        <input name="montant" type="number" step="0.01" aria-label="Montant" required />
        <BoutonEnvoyer libelle="Ajouter" />
      </form>
    </>
  );
}