7. Gérer la soumission du formulaire

Maintenant que le state de notre formulaire est à jour avec ce qui est affiché dans le DOM et les interactions de l’utilisateur, la dernière étape est de définir un comportement lorsque le formulaire est soumis. En effet, lorsque l’utilisateur interagit avec notre formulaire, et clique sur le bouton « Valider », que vas t-il se passer ? Pour le moment, lors de la soumission du formulaire, on va se contenter d’afficher les données soumises dans la console, et de rediriger l’utilisateur vers la page de détails d’un pokémon. Modifiez donc le formulaire pokemon-form.tsx :

// Les autres importations
import { useHistory } from 'react-router-dom';

// ...
const PokemonForm: FunctionComponent<Props> = ({pokemon}) => {

  const history = useHistory();

  //....

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(form);
    history.push(`/pokemons/${pokemon.id}`);
  }
 
  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      ...
    </form>
  );
};
 
export default PokemonForm;

À la ligne 2 et 7, on importe et on met en place le Hook useHistory.

Ensuite, on déclare de la ligne 11 à 15 la méthode handleSubmit, chargé de gérer le comportement de soumission du formulaire. Tout d’abord, on bloque le comportement natif du formulaire, afin de traiter nous même la soumission du formulaire, grâce à la méthode preventDefault. Ensuite on affiche les données dans le state du formulaire dans la console du navigateur, et on redirige l’utilisateur vers la page de détail d’un pokémon.

Enfin à la ligne 18, on lie l’événement onSubmit de soumission du formulaire à notre méthode de gestionnaire d’événement handleSubmit.

On a donc un formulaire fonctionnel, qui sauvegarde toutes les données et les modifications apportées dans son state, et nous avons également mis en place un traitement basique à la soumission du formulaire. Si vous retournez dans votre application et interagissez avec votre formulaire, vous devriez voir dans la console de votre navigateur tous les changements qui ont été pris en compte au niveau du state de notre formulaire, puis vous êtes redirigé vers la page de détails d’un pokémon.

Le pokémon modifié s’affiche correctement dans la console du navigateur.

C’est parfait, on a maintenant une base solide, et on est prêt à passer à la suite !