Ajouter un formulaire dans Redux

Dans la leçon précédente, nous avons appris que pour les champs de saisie d'un formulaire, on peut utiliser des états qui fonctionneront uniquement à l'intérieur d'un composant, et nous avons créé un formulaire vide.

Plaçons à l'intérieur des balises form le code HTML pour chaque champ où les informations seront saisies. La première saisie sera responsable du nom du produit et son code HTML sera le suivant :

products/NewProductForm.jsx<form>
  <p>
    <label htmlFor="productName">Nom :</label>
    <input
      id="productName"
      name="productName"
      value={name}
      onChange={onNameChanged}
    />
  </p>
</form>

Le deuxième sera un textarea pour la description du produit :

products/NewProductForm.jsx<p>
  <label htmlFor="productDesc">Description :</label>
  <textarea
    id="productDesc"
    name="productDesc"
    value={desc}
    onChange={onDescChanged}
  />
</p>

Écrivez vous-même le code pour les deux champs de saisie restants pour le prix et la quantité avec les id productPrice et productAmount respectivement.

Après les quatre champs de saisie, avant la balise fermante form, ajoutez un bouton pour sauvegarder :

products/NewProductForm.jsx<button type="button">sauvegarder</button>

Notre composant avec le formulaire est prêt. Affichons-le sur la page principale. Pour cela, ouvrons le fichier root.jsx, importons-y le composant :

app/root.jsximport { NewProductForm } from '../parts/products/NewProductForm'

Et insérons-le entre la balise hr et le composant ProductsList comme ceci :

app/root.jsx<hr></hr>
<NewProductForm />
<ProductsList />

Lançons notre application et admirons le formulaire et la liste des produits. Ajoutons encore des styles dans index.css :

index.css#main-page {
  max-width: 600px;
}

select,
textarea,
input,
button {
  font-size: 18px;
}

form {
  margin-bottom: 20px;
  border-bottom: 2px solid lightgray;
  padding-bottom: 10px;
}

form p {
  margin: 5px;
}