Ottieni i tuoi moduli React costruiti 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 facilmente aggiungere 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.
Installazione di 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 usando npm, esegui il seguente comando nel tuo terminale:
npm install react-hook-form
Per installare React Hook Form usando il filato, esegui il seguente comando:
filato aggiungere reagire-gancio-forma
Creazione di un modulo utilizzando React Hook Form
Per creare un modulo utilizzando React Hook Form, è necessario utilizzare il file
useForm gancio. IL useForm hook ti dà accesso a metodi e proprietà che utilizzerai crea e gestisci i tuoi moduli nella tua applicazione React.Ecco un esempio che mostra come utilizzare il useForm gancio:
importare Reagire da'reagire'
importare {usaModulo} da'reagire-forma-gancio';funzioneModulo() {
cost { register, handleSubmit } = useForm();
cost onSubmit = (dati) =>consolare.log (dati);ritorno (
esportarepredefinito Modulo;
La libreria React Hook Form utilizza il formato Registrati metodo per registrare i valori di input nell'hook. IL Registrati Il 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 "nome". Il handleSubmit Il metodo della libreria React Hook Form gestisce l'invio del modulo.
Per gestire l'invio del modulo, passerai la funzione di richiamata onSubmit al handleSubmit metodo. IL onSubmit La funzione riceverà un oggetto contenente i valori di tutti gli input del modulo.
Convalida gli input con il metodo Register
IL Registrati Il metodo consente di impostare regole di convalida per i campi di input. Per aggiungere la convalida ai campi di input, si passa un oggetto con regole di convalida come secondo argomento al Registrati metodo.
Così:
importare Reagire da'reagire'
importare {usaModulo} da'reagire-forma-gancio';funzioneModulo() {
cost{ register, handleSubmit } = useForm();
cost onSubmit = (dati) =>consolare.log (dati);
ritorno (
esportarepredefinito Modulo;
In questo esempio, aggiungi una regola di convalida al campo di input "firstname" e due regole di convalida alla "password". IL necessario La regola specifica che l'utente deve compilare i campi di input e non può inviare il modulo se i campi sono vuoti.
IL lunghezza massima regola imposta il numero massimo di lettere alfabetiche del valore di input. A parte il necessario E lunghezza massima metodi, è possibile aggiungere altre regole di convalida, ad esempio min, max, minLunghezza, modello, E convalidare.
minimo Massimo
IL min regola specifica il valore minimo per un campo di input e il max regola specifica il suo valore massimo.
Puoi usare il min E max regole con input di tipo numerico, in questo modo:
'numero' { ...Registrati("età", {min: 18, max: 35}) } />
Il valore del campo di input sopra deve essere almeno 18 e non superiore a 35.
minLunghezza
IL minLunghezza la regola è simile alla lunghezza massima regola ma imposta invece il numero minimo di lettere alfabetiche:
'testo' { ...Registrati("nome", { minLunghezza: 10 })}/>
In questo esempio, la regola minLength specifica che il valore dell'input deve essere lungo almeno 10 caratteri.
modello e convalida
IL modello rule specifica un modello di espressione regolare che deve corrispondere al valore di input. IL convalidare rule consente di definire una funzione di convalida personalizzata per convalidare il valore di input. La funzione dovrebbe restituire entrambi VERO o un messaggio di errore di stringa.
Per esempio:
'testo' { ...Registrati("nome di battesimo", {modello: **/^[A-Za-z]+$/**}) } />
'numero' { ...Registrati("test", {**convalida: (valore) => valore <= 12** }) } />
In questo esempio, l'input "firstname" utilizza il modello regola. IL modello richiede che il valore di input contenga solo caratteri alfabetici (maiuscoli e minuscoli).
L'ingresso "test" utilizza il convalidare regola per definire una funzione di convalida personalizzata che controlla se il suo valore è minore o uguale a 12.
Gestione degli errori nel modulo
La libreria React Hook Form fornisce un meccanismo integrato per gestione degli errori JavaScript nelle tue forme IL handleSubmit La funzione, chiamata quando l'utente invia il modulo, restituisce una promessa che si risolve con i dati del modulo se la convalida ha esito positivo.
Tuttavia, se si verificano errori di convalida, la promessa viene rifiutata con un oggetto errore che contiene gli errori di convalida.
Ecco un esempio di come gestire gli errori utilizzando il handleSubmit funzione:
importare Reagire da'reagire'
importare {usaModulo} da'reagire-forma-gancio';funzioneModulo() {
cost {registrati, gestisciInvia, formState: { errori } } = useForm();
cost onSubmit = (dati) =>consolare.log (dati);ritorno (
'numero' { ...Registrati("età", {min: 18, max: 35,}) } />
{errori.età?.tipo 'massimo' && <span> Sei troppo vecchio per questo sitospan>}
{errori.età?.tipo 'minimo' && <span> Sei troppo giovane per questo sitospan>}
esportarepredefinito Modulo;
In questo blocco di codice, il formState oggetto ottiene l'accesso agli errori di ciascun campo. IL errori oggetto memorizza gli errori di convalida per ogni campo di input. IL errori oggetto restituisce in modo condizionale un messaggio di errore per ogni campo non valido.
Per il nome di battesimo campo di input, se il necessario regola non viene soddisfatta, accanto al campo di immissione verrà visualizzato un messaggio di errore: "Inserisci il tuo nome". Se il valore del età campo di immissione è al di fuori dell'intervallo consentito, verrà visualizzato un messaggio di errore.
Se il valore è inferiore a 18, il messaggio di errore sarà "Sei troppo giovane per questo sito" e se il valore è maggiore di 35, il messaggio di errore sarà "Sei troppo vecchio per questo sito".
Ora puoi creare moduli affidabili in React
La creazione di moduli in React può essere un processo complesso e dispendioso in termini di tempo. Tuttavia, React Hook Form semplifica questo compito fornendo una libreria flessibile e facile da usare per la gestione dei dati del modulo e la convalida.
Con l'aiuto dell'hook useForm, del metodo register e del metodo handleSubmit, la creazione di moduli in React diventa un processo più efficiente e semplificato. Puoi creare moduli funzionali, migliorando a sua volta l'esperienza dell'utente e la qualità complessiva delle tue applicazioni React.
