Gestion de la soumission de formulaire (`onSubmit`)

Intercepter l'action finale : l'événement onSubmit

Une fois que l'utilisateur a rempli les champs d'un formulaire, l'étape suivante est généralement de soumettre ces informations. En HTML standard, cela se produit lorsque l'utilisateur clique sur un bouton de type `submit` (`` ou ``) à l'intérieur d'un élément `

`, ou parfois en appuyant sur la touche Entrée dans certains champs.

React permet d'intercepter cette action de soumission grâce à l'événement `onSubmit`. Cet événement se déclare comme une prop directement sur l'élément `` lui-même. Lorsque l'événement de soumission est déclenché par le navigateur, la fonction que vous avez passée à la prop `onSubmit` sera exécutée.

C'est dans cette fonction gestionnaire `onSubmit` que vous allez typiquement placer la logique qui doit s'exécuter lorsque le formulaire est soumis : validation finale, envoi des données à une API, mise à jour de l'état global de l'application, redirection de l'utilisateur, etc.

Contrôler le flux : `event.preventDefault()`

Le comportement par défaut du navigateur lors de la soumission d'un formulaire HTML est d'envoyer les données au serveur (à l'URL spécifiée dans l'attribut `action` du formulaire) et de provoquer un rechargement complet de la page. Dans le contexte d'une application monopage (Single Page Application - SPA) construite avec React, ce rechargement complet est presque toujours indésirable. Il entraînerait la perte de l'état de l'application côté client et une expérience utilisateur saccadée.

Pour empêcher ce comportement par défaut, la première chose à faire dans votre gestionnaire `onSubmit` est d'appeler `event.preventDefault()`. L'objet `event` est passé automatiquement par React à votre fonction gestionnaire. En appelant sa méthode `preventDefault()`, vous dites au navigateur : "Ne fais pas ce que tu ferais normalement lors d'une soumission de formulaire ; laisse JavaScript (et donc React) gérer la suite."

Oublier `event.preventDefault()` est une erreur courante qui mène souvent à des rechargements de page inattendus et à la perte de l'état lors de la soumission de formulaires en React.

Mettre en place le gestionnaire `onSubmit`

L'implémentation est simple : définissez une fonction (souvent appelée `handleSubmit` ou `onSubmit`) dans votre composant et passez-la à la prop `onSubmit` de votre balise ``. N'oubliez pas d'inclure `event.preventDefault()` au début de cette fonction.

Dans le cas des composants contrôlés, les données du formulaire sont déjà disponibles dans l'état du composant. Votre fonction `handleSubmit` peut donc y accéder directement pour effectuer les actions nécessaires.

import React, { useState } from 'react';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (event) => setUsername(event.target.value);
  const handlePasswordChange = (event) => setPassword(event.target.value);

  // Fonction appelée lors de la soumission du formulaire
  const handleSubmit = (event) => {
    // 1. Empêcher le rechargement de la page
    event.preventDefault(); 

    // 2. Accéder aux données (déjà dans l'état)
    console.log('Tentative de connexion avec :');
    console.log('Username:', username);
    console.log('Password:', password);

    // 3. Logique de soumission (ex: appel API)
    alert(`Connexion de ${username}... (simulation)`);
    // fetch('/api/login', { method: 'POST', body: JSON.stringify({ username, password }) ... });

    // Optionnel: Réinitialiser le formulaire après soumission
    // setUsername('');
    // setPassword('');
  };

  return (
    // Attacher le gestionnaire à l'événement onSubmit du formulaire
    
      
        Nom d'utilisateur:
        
      
      

      
        Mot de passe:
        
      
      

      {/* Un bouton de type 'submit' déclenche l'onSubmit du formulaire parent */}
      Se connecter
    
  );
}

export default LoginForm;

Il est crucial de noter que `onSubmit` est attaché à la balise `