Forms

Objectiu

Quan creeu aplicacions amb React, tard o d’hora necessitareu gestionar la interacció de l’usuari mitjançant formularis. Són essencials per a funcions com:

La inscripció d’usuaris.
L’inici de sessió.
La subscripció a butlletins.
Qualsevol altra forma d’interacció.

Construir formularis en React té reptes propis. Hi ha moltes parts mòbils a tenir en compte:

Estat del formulari

Els formularis tenen camps on els usuaris poden introduir dades.

Com obtenim els valors dins i fora dels camps de formulari?
Com gestionem els canvis en cada camp?

Validació de dades

És important assegurar-se que les dades introduïdes als camps estan en el format esperat.

Enviament del formulari

Quan les dades són vàlides:

Com les enviem a una base de dades o a un magatzem de dades?
Què passa després d’enviar-les?

Perquè els vostres formularis funcionin com cal, totes aquestes parts s’han de gestionar correctament.

🔨 Instal·lació.

En aquest enllaç tens el projecte de suport: https://gitlab.com/xtec/ts/react-forms

📋 Índex

🟢 Formulari senzill amb un input i un botó
🔢 Afegir un input numèric
🔍 Formulari amb cerca
✉️ React Hook Forms
📌 Recursos Addicionals

🟢 1. Formulari senzill amb un `input` i un `botó`

En aquest primer exemple, crearem un formulari senzill amb un camp de text i un botó.

El contingut de l’input es mostrarà per pantalla quan fem clic al botó.

tsx

import { useState } from "react";

export default function SimpleForm() {
    const [nom, setNom] = useState<string>(""); // Tipem l'estat com a string
    const [result, setResult] = useState<string>("");

    function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
      event.preventDefault(); // Evitar el comportament per defecte
      setResult(`Bon dia ${nom}!`);
    }

    return (
      <main className="container mt-5">
          <div className="card shadow">
            <div className="card-body">
              <form onSubmit={handleSubmit}>
                <label htmlFor="simple-input">Com et dius ?</label>
                <input id="simple-input" type="nom" value={nom}
                  onChange={(e) => setNom(e.target.value)} 
                  placeholder="Anonymous"
                />
                <button type="submit">Enviar</button>
              </form>
              {result && (
                <p className="mt-3 text-success">{result}</p>
              )}
            </div>
          </div>
      </main>
    );
}

📌 Conceptes destacats:

useState: Controla l’estat del valor de l’input.
onSubmit: Evita que la pàgina es recarregui.
onChange: Actualitza l’estat amb el contingut de l’input.

El que potser et sorprendrà si vens de Javascript és perquè necessites aquest event si realment només vols validar les dades al final de tot.

onChange={(e) => setNom(e.target.value)}

El que passa és que si es vol mantenir la integritat de les dades entre el client i el servidor (bidireccional) cal que es comprovi en cada canvi.

També és curiosa la manera que usem per a retornar la resposta a la pàgina:

{result && (
    <p className="mt-3 text-success">{result}</p>
)}

Si result existeix (no és un valor buit) es mostra el seu contingut dins d’una etiqueta p HTML.

🔢 2. Afegir un `input` numèric

Els inputs poden ser de diferents tipus (text, number, password, etc.). Afegirem un input numèric i farem càlculs senzills amb el valor introduït.

tsx

import React, { useState } from "react";

export default function MoneyInputForm() {
  const [amount, setAmount] = useState<number | "">(""); // Estat inicial buit o número
  const [result, setResult] = useState<string>(""); // Estat per mostrar el resultat

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (amount === "" || amount < 0) {
      setResult("⚠️ Introdueix un valor vàlid superior o igual a 0.");
    } else {
      setResult(`Has introduït: ${amount.toFixed(2)} €`);
    }
  }

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const value = event.target.value;
    if (value === "") {
      setAmount(""); // Si està buit, mantenim un string buit
    } else if (!isNaN(Number(value))) {
      setAmount(Number(value)); // Convertim el valor a número
    }
  }

  return (
    <div className="container">
      <form onSubmit={handleSubmit}>
        <label htmlFor="money-input" className="form-label">
          Introdueix una quantitat de diners:
        </label>
        <input
          id="money-input" type="number"
          value={amount}
          onChange={handleChange}
          placeholder="Exemple: 50.75"
          className="form-control w-auto my-2"
          min="0" step="0.01"
        />
        <button type="submit" className="btn btn-primary">
          Enviar
        </button>
      </form>
      {result && (
        <p className={`mt-3 ${amount !== "" && amount >= 0 ? "text-success" : "text-danger"}`}>
          {result}
        </p>
      )}
    </div>
  );
}

Estàs llegint una vista prèvia.

Inicia sessió per llegir l'article complet. Qualsevol compte obre 4 articles gratuïts al mes; l'alumnat i el professorat llegeixen les pàgines del seu curs sense límit.

Inicia sessió

Forms

#Objectiu

#🔨 Instal·lació.

#📋 Índex

#🟢 1. Formulari senzill amb un input i un botó

#📌 Conceptes destacats:

#🔢 2. Afegir un input numèric