0Pricing
React Academy · Lezione

Introduzione a React Hook Form

Installi RHF, chiami useForm, registri gli input e gestisca l'invio del form.

Introduzione a React Hook Form è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione installerà React Hook Form, chiamerà useForm, registrerà gli input e gestirà l’invio dei moduli senza amministrare singole variabili di stato.

Perché React Hook Form?

I moduli controllati tradizionali in React richiedono un useState per ogni campo e un onChange per ogni input. React Hook Form (RHF) gestisce tutto internamente usando input non controllati, offrendo un’API più semplice con meno renderizzazioni.

Installazione

Installi il pacchetto. Per l’utilizzo di base non sono necessarie dipendenze peer aggiuntive.
npm install react-hook-form

Hook useForm

Chiami useForm() per ottenere la funzione register, il wrapper handleSubmit e formState. Sono i tre elementi fondamentali necessari per qualsiasi modulo.
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Registrazione degli input

Espanda il risultato di register('fieldName') su ogni input. RHF associa internamente un ref e i gestori degli eventi all’input: non sono necessari né value né onChange.
<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

La callback onSubmit

handleSubmit convalida tutti i campi e chiama la callback onSubmit con un oggetto dati tipizzato solo quando il modulo è valido. Se la validazione fallisce, popola invece formState.errors.
const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Valori predefiniti

Passi `defaultValues` a useForm per precompilare i campi del modulo. È utile per i moduli di modifica in cui carica dati esistenti.
const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Proprietà di formState

formState espone utili valori booleani: `isSubmitting` è true mentre viene eseguito handleSubmit, `isDirty` è true se un campo è cambiato, `isValid` è true se non ci sono errori, oltre all’oggetto `errors`.
const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Reimpostazione del modulo

Chiami `reset()` per cancellare tutti i campi e reimpostare formState. Facoltativamente, passi nuovi valori predefiniti.
const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Vantaggi in termini di prestazioni

Poiché RHF usa input non controllati, il modulo non viene renderizzato nuovamente a ogni pressione di un tasto, a differenza dei moduli React controllati. Solo gli errori di validazione e lo stato dell’invio causano nuove renderizzazioni, rendendo reattivi anche i moduli grandi.

Verifica rapida

Che cosa fa handleSubmit(onSubmit) quando l’utente invia il modulo?

Riepilogo

Installi RHF, chiami useForm per ottenere register e handleSubmit, espanda register() sugli input e racchiuda il gestore dell’invio in handleSubmit. Imposti defaultValues per i moduli di modifica e chiami reset() dopo un invio completato correttamente.

Prossimo

Prossima lezione: **Regole di validazione e messaggi di errore** — applicherà le regole di validazione integrate e mostrerà i messaggi di errore agli utenti.

Domande Frequenti

La lezione «Introduzione a React Hook Form» è gratuita?

Sì — il testo completo di «Introduzione a React Hook Form» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Introduzione a React Hook Form»?

Installi RHF, chiami useForm, registri gli input e gestisca l'invio del form. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Introduzione a React Hook Form»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Introduzione a React Hook Form
  2. Regole di validazione e messaggi di errore
  3. Validazione degli schemi con Zod
  4. Campi dinamici con useFieldArray
← Torna a React Academy