En aquest tema, aprendrem com gestionar formularis en React utilitzant components controlats. Els components controlats són aquells en què el formulari de dades és gestionat pel component React. Això significa que l'estat del formulari és mantingut en el component i actualitzat a mesura que l'usuari interactua amb el formulari.

1. Components controlats: Components en què l'estat del formulari és gestionat pel component React.
2. Components no controlats: Components en què l'estat del formulari és gestionat pel DOM.
3. Gestió de l'estat: Utilització de l'estat del component per mantenir els valors dels camps del formulari.
4. Esdeveniments de formulari: Maneig d'esdeveniments com onChange i onSubmit per actualitzar l'estat i gestionar l'enviament del formulari.

A continuació, es mostra un exemple bàsic d'un formulari amb un camp de text controlat per l'estat del component.

1. Importació i inicialització de l'estat:

   import React, { useState } from 'react';
   const [name, setName] = useState('');
   

   Utilitzem el hook useState per crear una variable d'estat name i una funció setName per actualitzar-la.

2. Gestió del canvi:

   const handleChange = (event) => {
     setName(event.target.value);
   };
   

   La funció handleChange s'executa cada vegada que l'usuari escriu en el camp de text, actualitzant l'estat name amb el valor actual del camp.

3. Gestió de l'enviament:

   const handleSubmit = (event) => {
     event.preventDefault();
     alert(`El nom introduït és: ${name}`);
   };
   

   La funció handleSubmit s'executa quan el formulari és enviat. Evita el comportament per defecte del formulari (que és recarregar la pàgina) i mostra una alerta amb el valor de name.

4. Renderització del formulari:

   return (
     <form onSubmit={handleSubmit}>
       <label>
         Nom:
         <input type="text" value={name} onChange={handleChange} />
       </label>
       <button type="submit">Enviar</button>
     </form>
   );
   

   El formulari conté un camp de text i un botó d'enviament. El valor del camp de text està lligat a l'estat name, i l'esdeveniment onChange actualitza aquest estat.

Crea un formulari controlat amb els següents camps:

• Nom
• Correu electrònic
• Missatge

Quan l'usuari enviï el formulari, mostra una alerta amb els valors introduïts.

Solució

1. Inicialització de l'estat:

   const [formData, setFormData] = useState({
     name: '',
     email: '',
     message: ''
   });
   

   Utilitzem un objecte per mantenir l'estat de múltiples camps del formulari.

2. Gestió del canvi:

   const handleChange = (event) => {
     const { name, value } = event.target;
     setFormData({
       ...formData,
       [name]: value
     });
   };
   

   La funció handleChange actualitza l'estat corresponent al camp que ha canviat.

3. Gestió de l'enviament:

   const handleSubmit = (event) => {
     event.preventDefault();
     alert(`Nom: ${formData.name}\nCorreu electrònic: ${formData.email}\nMissatge: ${formData.message}`);
   };
   

   La funció handleSubmit mostra una alerta amb els valors dels camps del formulari.

4. Renderització del formulari:

   return (
     <form onSubmit={handleSubmit}>
       <label>
         Nom:
         <input type="text" name="name" value={formData.name} onChange={handleChange} />
       </label>
       <br />
       <label>
         Correu electrònic:
         <input type="email" name="email" value={formData.email} onChange={handleChange} />
       </label>
       <br />
       <label>
         Missatge:
         <textarea name="message" value={formData.message} onChange={handleChange} />
       </label>
       <br />
       <button type="submit">Enviar</button>
     </form>
   );
   

1. Oblidar-se de lligar l'estat al valor del camp:

   • Assegura't que el valor del camp del formulari està lligat a l'estat del component.
   • Exemple: <input type="text" value={name} onChange={handleChange} />

2. No gestionar l'esdeveniment onChange:

   • Sense la funció handleChange, l'estat del component no s'actualitzarà.
   • Exemple: const handleChange = (event) => { setName(event.target.value); };

3. No evitar el comportament per defecte del formulari:

   • Utilitza event.preventDefault() en la funció handleSubmit per evitar que la pàgina es recarregui.

En aquesta secció, hem après com gestionar formularis en React utilitzant components controlats. Hem vist com utilitzar l'estat del component per mantenir els valors dels camps del formulari i com gestionar els esdeveniments de canvi i enviament. També hem practicat amb un exemple bàsic i un exercici amb múltiples camps. Ara estem preparats per avançar cap a conceptes més avançats en React.