Comment ajouter par programmation des champs de saisie pour réagir aux formulaires

Dans cet article, nous allons créer une application de démonstration illustrant comment nous pouvons ajouter des champs de saisie à un formulaire dans React par programmation. Nous aurons un bouton d’ajout, qui affiche un nouveau champ de saisie lorsqu’il est cliqué, et un bouton de suppression qui fait le contraire.

Les formulaires sont un élément essentiel de toute application Web. Lorsque vous travaillez avec des formulaires dans React, il y a des situations où nous n’avons pas un nombre prédéfini de champs de saisie et ne pouvons pas les coder en dur ou les rendre statiquement. Par conséquent, nous devons créer un moyen d’ajouter et de supprimer dynamiquement des champs de saisie à la demande.

Dans cet article, nous allons créer une application de démonstration illustrant comment ajouter des champs de saisie à un formulaire dans React par programmation. Nous aurons un bouton d’ajout, qui affiche un nouveau champ de saisie lorsqu’il est cliqué, et un bouton de suppression qui fait le contraire.

Configuration du projet

Créez une nouvelle application React à l’aide de la commande suivante :

npx create-react-app form-input-demo

Ensuite, exécutez la commande suivante indépendamment pour passer au nouveau form-input-demo répertoire et démarrez le serveur de développement :

cd form-input-demo
npm start

En cas de succès, ouvrez le port désigné dans votre navigateur pour voir l’application.

Comment créer un formulaire simple dans React

Créer un formulaire dans React est assez simple, car react utilise une approche similaire à la manière traditionnelle de créer des formulaires avec du HTML brut. Il vous suffit de spécifier un form élément dans lequel vous pouvez définir un ou plusieurs éléments de formulaire, par exemple, <input>, <label>, <select>etc.

Créons un formulaire avec un Name et Email champs de saisie. Remplacez le contenu de votre src/App.js fichier avec les éléments suivants :

import "./App.css";
function App() {
  return (
    <div className="App">
      <form>
        <div className="input-group">
          <label htmlFor="name">Name</label>
          <input type="text" id="name" />
        </div>
        <div className="input-group">
          <label htmlFor="email">Email</label>
          <input type="email" id="email" />
        </div>
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </form>
    </div>
  );
}
export default App;

Donnons à notre application un aspect décent en remplaçant les styles dans le src/App.js fichier avec les éléments suivants :

form {
  margin: 3rem auto;
  width: 500px;
  max-width: 80%;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
form > div {
  display: flex;
}
.input-group {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
}
.input-group > label {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.input {
  width: 100%;
  display: flex;
}
.input > input {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
}
.input > input:focus {
  outline: none;
}
.input > div {
  padding: 0.5rem 1rem;
  background: #e34728;
  margin-left: 0.5rem;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.add-btn {
  padding: 0.5rem 1rem;
  background: #ccc;
  border: none;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.center {
  display: flex;
  justify-content: center;
}
.submit-btn {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #e34728;
  background: #fff;
  margin: 1.2rem 0;
  color: #e34728;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.dialog-box {
  margin: 0.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  grid-gap: 1rem;
}
.dialog-box > input,
.dialog-box > select {
  padding: 0.5rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.dialog-box > input:focus,
.dialog-box > select:focus {
  outline: none;
}
.hide {
  display: none;
}

Enregistrez les modifications et prévisualisez l’application dans votre navigateur pour voir le formulaire.

Contrôle des champs de saisie

Les éléments de formulaire en HTML gardent une trace de leur propre état et le modifient en fonction de l’entrée de l’utilisateur. Dans React, cependant, il est préférable de transformer ces éléments en composants contrôlés, c’est-à-dire un élément de formulaire dont la valeur est contrôlée par React. Nous faisons de React la seule source de vérité, et il contrôle et met à jour l’état du formulaire en conséquence.

Autoriser Réagir pour gérer l’état de notre formulaire, mettez à jour le code dans le App.js fichier avec les éléments suivants :

import { useState } from "react";
import "./App.css";
function App() {
  const [formValues, setFormValues] = useState({});
  const handleChange = (e) => {
    setFormValues({ ...formValues, [e.target.id]: e.target.value });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formValues);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <div className="input-group">
          <label htmlFor="name">Name</label>
          <input
            type="text"
            id="name"
            value={formValues.name || ""}
            onChange={handleChange}
          />
        </div>
        <div className="input-group">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            value={formValues.email || ""}
            onChange={handleChange}
          />
        </div>
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </form>
    </div>
  );
}
export default App;

Dans le code ci-dessus, nous avons défini un formValues state, un objet qui contient la valeur des champs d’entrée. Ensuite, nous avons créé une fonction appelée handleChangel’a passé à chaque champ d’entrée, et maintenant il met à jour la valeur d’état.

Nous avons ajouté un value appui à la input élément pour obtenir la valeur du champ d’entrée à partir de l’élément formValues Etat. Nous avons également ajouté un handleSubmit fonction qui empêche l’action par défaut de l’événement et enregistre les valeurs du formulaire dans la console lorsque le formulaire est soumis.

Rendre le formulaire dynamique

Nous avons maintenant vu comment créer un formulaire simple dans React. Cependant, cette approche est appropriée et ne fonctionne correctement que lorsque nous connaissons le nombre de champs de saisie requis par notre application. Dans d’autres cas, où nous ne savons pas à l’avance, nous devons adopter une approche différente et plus dynamique pour créer notre formulaire.

Pour rendre le formulaire dynamique, au lieu d’avoir un seul objet qui contient les valeurs du formulaire, nous voulons représenter l’état du formulaire dans un tableau d’objets. Chaque objet contiendra les détails du champ d’entrée à rendre, par exemple, label, type,
valueetc. Nous pouvons ensuite parcourir le tableau et restituer un champ de saisie pour chaque objet.

Cette approche facilite l’ajout ou la suppression de champs d’entrée par programmation dans l’application. Créons un Input composant. Créé un Input.js dossier dans le src/ dossier et ajoutez-y ce qui suit :

import React from "react";
export default function Input({ objValue, onChange, index }) {
  const { label, type, value } = objValue;
  return (
    <div className="input-group">
      <label htmlFor={label}>{label}</label>
      <div className="input">
        <input
          type={type || "text"}
          id={label}
          value={value || ""}
          onChange={(e) => onChange(e, index)}
        />
      </div>
    </div>
  );
}

Nous avons créé un composant qui rend un label Et un input champ. Le composant attend quelques accessoires : un objet contenant des détails sur le champ d’entrée à restituer, l’index de l’objet et une fonction pour contrôler la valeur du champ d’entrée.

Pour utiliser ce composant dans l’application, remplacez le code dans votre src/App.js fichier avec les éléments suivants :

import { useState } from "react";
import Input from "./Input";
import "./App.css";
function App() {
  const [formValues, setFormValues] = useState([
    {
      label: "Name",
      type: "text",
      value: "",
    },
  ]);
  const handleChange = (e, index) => {
    const values = [...formValues];
    values[index].value = e.target.value;
    setFormValues(values);
  };
  return (
    <div className="App">
      <form>
        {formValues.map((obj, index) => (
          <Input
            key={index}
            objValue={obj}
            onChange={handleChange}
            index={index}
          />
        ))}
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </form>
    </div>
  );
}
export default App;

Nous avons également passé un handleChange fonctionner comme un support pour le Input composant, qui permet de gérer et de contrôler les valeurs des champs de saisie du formulaire.

Nous avons également initialisé le formValues state avec un tableau contenant un seul objet. Allez-y et ouvrez l’application dans votre navigateur pour voir notre champ de saisie.

Ajout de champs de saisie

Depuis que nous avons reformaté notre code pour utiliser une approche plus dynamique du rendu des champs d’entrée, l’ajout ou la suppression de champs d’entrée devient très facile car nous n’avons qu’à trouver un moyen de manipuler le formValues déployer.

Ouvrez le src/App.js fichier et mettez-le à jour comme indiqué ci-dessous pour créer un bouton permettant aux utilisateurs d’ajouter dynamiquement des champs de saisie au formulaire.

import { useState, useRef } from "react";
import Input from "./Input";
import "./App.css";

function App() {
  const [formValues, setFormValues] = useState([]);
  const [toggle, setToggle] = useState(false);

  const inputRef = useRef();
  const selectRef = useRef();

  const handleChange = (e, index) => {
    const values = [...formValues];
    values[index].value = e.target.value;
    setFormValues(values);
  };

  const handleAddField = (e) => {
    e.preventDefault();
    const values = [...formValues];
    values.push({
      label: inputRef.current.value || "label",
      type: selectRef.current.value || "text",
      value: "",
    });
    setFormValues(values);
    setToggle(false);
  };

  const addBtnClick = (e) => {
    e.preventDefault();
    setToggle(true);
  };

  return (
    <div className="App">
      <form>
        
        {!toggle ? (
          <div className="center">
            <button className="add-btn" onClick={addBtnClick}>
              Add new
            </button>
          </div>
        ) : (
          <div className="dialog-box">
            <input type="text" placeholder="label" ref={inputRef} />
            <select ref={selectRef}>
              <option value="text">Text</option>
              <option value="number">Number</option>
              <option value="email">Email</option>
              <option value="password">Password</option>
            </select>
            <button className="add-btn" onClick={handleAddField}>
              Add
            </button>
          </div>
        )}
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </form>
    </div>
  );
}
export default App;

Dans le code mis à jour, nous avons créé un nouveau bouton qui déclenche une handleAddField fonction. La fonction clone le tableau d’état de formulaire global, pousse un nouvel objet de champ d’entrée dans le tableau et définit l’état sur le nouveau tableau.

Nous avons également créé une boîte de dialogue qui ne devient visible que lorsque le Add new bouton est cliqué, à l’aide d’un toggle état que nous avons créé. La boîte de dialogue attend des valeurs pour le label et le type du champ de saisie à créer. Nous avons également configuré deux références pour extraire les valeurs fournies à la boîte de dialogue.

Enregistrez les modifications et testez l’application dans votre navigateur.

Veuillez garder à l’esprit que les types d’entrée ne sont pas limités aux quatre types que nous avons spécifiés. Vous pouvez ajouter plus et modifier le modes à votre goût.

Suppression de champs de saisie

Pour supprimer des champs de formulaire par programmation, mettez à jour le Input.js fichier comme indiqué ci-dessous :

import React from "react";
export default function Input({ objValue, onChange, index, deleteField }) {
  const { label, type, value } = objValue;
  return (
    <div className="input-group">
      <label htmlFor={label}>{label}</label>
      <div className="input">
        <input
          type={type || "text"}
          id={label}
          value={value || ""}
          onChange={(e) => onChange(e, index)}
        />
        {}
        <div onClick={(e) => deleteField(e, index)}>X</div>
      </div>
    </div>
  );
}

La Input le composant attend maintenant une fonction de suppression supplémentaire appelée deleteField comme accessoires. Il rend également un div à côté de chaque champ de saisie qui déclenche la fonction de suppression.

Ensuite, ouvrez le src/App.js fichier et mettez-le à jour comme indiqué ci-dessous :

import { useState, useRef } from "react";
import Input from "./Input";
import "./App.css";

function App() {
  const [formValues, setFormValues] = useState([]);
  const [toggle, setToggle] = useState(false);

  const inputRef = useRef();
  const selectRef = useRef();

  const handleChange = (e, index) => {
    
  };

  const handleAddField = (e) => {
    
  };

  const handleDeleteField = (e, index) => {
    const values = [...formValues];
    values.splice(index, 1);
    setFormValues(values);
  };

  const addBtnClick = (e) => {
    
  };

  return (
    <div className="App">
      <form>
        {formValues.map((obj, index) => (
          <Input
            key={index}
            objValue={obj}
            onChange={handleChange}
            index={index}
            
            deleteField={handleDeleteField}
          />
        ))}
        
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </form>
    </div>
  );
}
export default App;

Dans le code ci-dessus, nous avons créé un handleDeleteField fonction qui utilise l’index d’un objet pour le supprimer d’un nouveau clone du tableau d’état du formulaire.

Enregistrez les modifications, puis créez des champs de saisie et essayez de les supprimer.

Traitement de la soumission du formulaire

Pour gérer la soumission du formulaire, nous devons créer une fonction de gestionnaire et la définir comme valeur pour le onSubmit attribut sur l’élément de formulaire. À l’intérieur de la fonction, vous pouvez ensuite extraire les valeurs d’entrée de votre formulaire et les envoyer à un backend ou faire d’autres choses.

Ajoutez la fonction suivante juste avant l’instruction return dans le src/App.js dossier:

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(
    formValues.map((val) => {
      return { [val.label]: val.value };
    })
  );
};

Comme nous n’avons préparé aucun backend, nous n’avons enregistré que les valeurs d’entrée du formulaire dans la console.

Ajoutez également un attribut onSubmit à l’élément de formulaire.

<form onSubmit={handleSubmit}>

Veuillez noter que nous pouvons également travailler avec des groupes de champs de saisie en modifiant simplement la structure des objets individuels dans le tableau d’état du formulaire.

Conclusion

Dans cet article, nous avons vu comment créer un formulaire simple dans React. Nous avons également examiné comment créer un formulaire plus dynamique qui donne aux utilisateurs du formulaire une certaine flexibilité pour ajouter ou supprimer des champs de formulaire par programmation selon les besoins. Vous pouvez maintenant personnaliser cette technique pour l’utiliser dans vos projets.