Forms

Introducció#

Fins ara les dades anaven en una sola direcció: de l’aplicació cap a la pantalla.

Un formulari és com van en l’altra: de l’usuari cap a l’aplicació.

Els necessitaràs per a gairebé tot — donar-se d’alta, iniciar la sessió, subscriure’s, cercar.

Construir formularis en React té tres reptes propis:

1. L’estat del formulari. Com treus el que l’usuari ha escrit d’un camp, i com t’assabentes que ha canviat?
2. La validació. Com comproves que el que ha escrit té el format que esperes?
3. L’enviament. Quan les dades són vàlides, on les envies, i què passa després?

Entorn de treball#

Crea un projecte com el de TSX, amb el nom react-form:

bunx create-vite@latest react-form -t react-ts
cd react-form
bun install
bun add -d tailwindcss @tailwindcss/vite

Repeteix-hi els tres retocs de sempre: el complement de Tailwind a vite.config.ts, l’@import "tailwindcss" a src/index.css, i fora src/App.css.

Un camp i un botó#

Comença pel més senzill: un camp de text i un botó.

El contingut del camp es mostrarà a la pantalla quan facis clic al botó.

import { useState } from "react"

export default function App() {

  const [name, setName] = useState("")
  const [result, setResult] = useState("")

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setResult(`Bon dia ${name}!`)
  }

  return (
    <form className="m-5 flex flex-col gap-3 w-96" onSubmit={handleSubmit}>
      <label htmlFor="name">Com et dius?</label>
      <input id="name" type="text" className="border p-1"
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Anonymous"/>
      <button type="submit" className="border rounded px-4 py-2">Enviar</button>
      {result && <p className="text-green-700">{result}</p>}
    </form>
  )
}

Hi ha tres línies que fan tota la feina, i val la pena mirar-les una a una.

event.preventDefault()#

Treu-la i prova el formulari:

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    setResult(`Bon dia ${name}!`)
  }

La pàgina es recarrega, i el missatge desapareix abans que el puguis llegir.

És el comportament original de l’HTML: enviar un formulari vol dir demanar-li una pàgina nova al servidor.

Com que aquí les dades les tractes tu, has de dir-li al navegador que no ho faci.

Torna-la a posar.

value i onChange#

Aquestes dues van sempre juntes:

        value={name}
        onChange={(event) => setName(event.target.value)}