Auteur : Bilal Zouine

Description : description Cet exemple illustre un formulaire simple pour saisir un prénom et un nom. Les valeurs sont affichées en temps réel sous forme d'alerte après la saisie dans les champs du formulaire.

Nom proposé : Formulaire de Saisie de Nom

Fonctionnalités :

• Permet à l'utilisateur de saisir un prénom et un nom via un formulaire.
• Mise à jour en temps réel des états pour le prénom et le nom.
• Affichage des valeurs saisies sous forme d'alerte en temps réel.
• Utilisation de gestionnaires d'événements pour suivre les changements dans les champs de saisie.

Code :

            
                import { useState } from "react";

export default function NameForm () {
    // Déclaration de deux états pour stocker le prénom et le nom
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')

    // Fonction qui s'occupe de la gestion des changements dans les champs de saisie du formulaire
    const updateNameFields = (event) => {
        const { value, name } = event.target
        // Vérifie quel champ a été modifié (prenom ou nom) en fonction de l'attribut "name"
        if (name === "fn") {
            // Met à jour l'état du prénom avec la valeur saisie
            setFirstName(value)
        } else {
            // Met à jour l'état du nom avec la valeur saisie
            setLastName(value)
        }
    }

    return (
        <>
            <div className="container">
                <div className="w-50 mx-auto mt-5">
                    {/* Formulaire pour saisir le prénom et le nom */}
                    <form >
                        <div className="form-group">
                            {/* Label pour le champ prénom */}
                            <label htmlFor="" className="form-label h5 text-white mb-3">Saisissez Prenom:</label>
                            {/* Champ de saisie pour le prénom avec gestion du changement */}
                            <input name="fn" className="form-control" onChange={(event) => { updateNameFields(event) }}/>
                        </div>

                        <div className="form-group">
                            {/* Label pour le champ nom */}
                            <label htmlFor="" className="form-label h5 text-white mb-3">Saisissez Nom:</label>
                            {/* Champ de saisie pour le nom avec gestion du changement */}
                            <input name="ln" className="form-control" onChange={(event) => { updateNameFields(event) }}/>
                        </div>
                    </form>

                    {/* Affichage des valeurs de prénom et nom sous forme d'alerte */}
                    <div className="alert alert-info mt-5">
                        <p>Prenom : {firstName}</p>
                        <p>Nom : {lastName}</p>
                    </div>
                </div>
            </div>
        </>
    )
}