Blog

May 09, 2023

Come creare moduli in React utilizzando il modulo React Hook

Get your React forms built and validated with the smallest effort. Building

Ottieni i tuoi moduli React creati e convalidati con il minimo sforzo.

La creazione di moduli in un'applicazione React può essere complessa e richiedere molto tempo. Con l'aiuto della libreria React Hook Form, puoi aggiungere facilmente moduli ad alte prestazioni alla tua applicazione React.

React Hook Form è una libreria per la creazione di moduli in React che semplifica il processo di creazione di moduli complessi e riutilizzabili. Se stai cercando di creare un'app React, dovresti imparare come creare moduli in React utilizzando la libreria React Hook Form.

Per iniziare a utilizzare React Hook Form, è necessario installarlo utilizzando i gestori di pacchetti npm o Yarn.

Per installare React Hook Form utilizzando npm, esegui il seguente comando nel tuo terminale:

Per installare React Hook Form utilizzando Yarn, esegui il comando seguente:

Per creare un modulo utilizzando React Hook Form, è necessario utilizzare il fileuseForm gancio. ILuseFormhook ti dà accesso a metodi e proprietà che utilizzerai per creare e gestire i tuoi moduli nella tua applicazione React.

Ecco un esempio che mostra come utilizzare il fileuseFormgancio:

La libreria React Hook Form utilizza il fileRegistrati metodo per registrare i valori di input sull'hook. ILRegistratiIl metodo collega i campi di input di un modulo alla libreria React Hook Form in modo che la libreria possa tracciare e convalidare i campi di input.

Nel blocco di codice sopra, registri un input con il nome "firstname". ILhandleSubmitIl metodo della libreria React Hook Form gestisce l'invio del modulo.

Per gestire l'invio del modulo, passerai la funzione di callbacksu InviaalhandleSubmit metodo. ILsu Inviala funzione riceverà un oggetto contenente i valori di tutti gli input del modulo.

ILRegistrati Il metodo ti consente di impostare regole di convalida per i tuoi campi di input. Per aggiungere convalida ai campi di input, passi un oggetto con regole di convalida come secondo argomento al fileRegistratimetodo.

Così:

In questo esempio, aggiungi una regola di convalida al campo di input "nome" e due regole di convalida alla "password". ILnecessarioregola specifica che l'utente deve compilare i campi di input e non può inviare il modulo se i campi sono vuoti.

ILlunghezza massima regola imposta il numero massimo di lettere alfabetiche del valore di input. A parte ilnecessarioElunghezza massimametodi, puoi aggiungere altre regole di convalida, comemin,massimo,minLength,modello, Econvalidare.

ILminregola specifica il valore minimo per un campo di input e ilmassimola regola specifica il suo valore massimo.

Puoi usare ilminEmassimoregole con input di tipo numerico, come questo:

Il valore del campo di input sopra deve essere almeno 18 e non superiore a 35.

ILminLengthla regola è simile a quellalunghezza massimaregola ma imposta invece il numero minimo di lettere alfabetiche:

In questo esempio, la regola minLength specifica che il valore dell'input deve contenere almeno 10 caratteri.

ILmodello regola specifica un modello di espressione regolare a cui deve corrispondere il valore di input. ILconvalidare regola consente di definire una funzione di convalida personalizzata per convalidare il valore di input. Anche la funzione dovrebbe restituireVEROo un messaggio di errore di stringa.

Per esempio:

In questo esempio, l'input "firstname" utilizza l'estensionemodello regola. ILmodellorichiede che il valore di input contenga solo caratteri alfabetici (maiuscoli e minuscoli).

L'input "test" utilizza il fileconvalidareregola per definire una funzione di convalida personalizzata che controlla se il suo valore è inferiore o uguale a 12.