[ReactJS] Utiliser plusieurs champs pour vos formulaires

La gestion des formulaires peut être quelque chose d’assez fastidieux quand on début sur ReactJS. Il est assez simple de gérer un champ, mais quand on gère plusieurs champs, on est vite tenté de créer plusieurs fonctions pour chaque champ de notre formulaire. Nous allons voir ensemble comment faire pour traiter plus facilement et de manière plus optimisé plusieurs champs afin de l’enregistrer dans notre state. Nous allons prendre pour exemple un formulaire de connexion qui prendre un compte un email et un mot de passe.

Pour commencer, il faut créer notre composant ReactJS avec nos deux champs :

class Login extends Component {

  render () {
    return (
      <form>
        <label>Email</label>
        <input type="text" name="email" />
        
        <label>Mot de passe</label>
        <input type="password" name="password" />
      </form>
    );
  }
}

Maintenant nous avons besoin de récupérer les valeurs des deux champs. Nous allons faire appelle à la même fonction pour les deux champs :

class Login extends Component {
  state = {
    email: "",
    password: ""
  }

  handleForm = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  render() {
    return (
      <form>
        <label>Email</label>
        <input type="text" name="email" onChange={this.handleForm} />

        <label>Mot de passe</label>
        <input type="password" name="password" onChange={this.handleForm} />
      </form>
    );
  }
}

Quelques explications :

Quand la valeur d’un champ va changer (onChange) la fonction handleForm va être appelée. Elle va prendre en paramètre les informations du champ courent.
On modifie le state avec en clé la propriété « name » des champs (email ou password dans notre cas) et va enregistrer le contenu du champs comme valeur dans le state.

Nous avons vu comment gérer facilement plusieurs champs dans notre formulaire. Ainsi, grâce à cette façon de procéder, nous optimisons notre code, tout est regroupé et on ne se perd pas dans une multitude de fonction pour chaque champ qui au final feraient tous la même chose. Il est important de bien choisir les nom des champs afin de les faire correspondre au state. Vous pourrez ainsi vous en servir pour traiter vos données sur ReactJS.