Come creare la convalida del modulo React con Formik e Yup

Blog

Come creare la convalida del modulo React con Formik e Yup

Moduli migliori con meno codice standard

Generalmente c'è un'elevata curva di apprendimento quando si lavora con una nuova libreria o framework e si cerca di implementare i moduli. Con le associazioni dati, la convalida e l'interfaccia utente, non è un compito semplice creare un nuovo modulo. Il nostro team ha iniziato a sviluppare un'applicazione React l'anno scorso con il piano di aggiungere oltre una dozzina di moduli. Sapevamo che React Hooks sarebbe arrivato e che avrebbe reso i metodi e lo stato del ciclo di vita più facili da gestire, ma questo non ci avrebbe impedito di andare avanti. Quando il nostro team si stava preparando a implementare i moduli, sapevamo di aver bisogno di solide basi. Non volevamo dipendere da un framework e volevamo essere in grado di scrivere i nostri componenti del modulo riutilizzabili.



Indagine

Ho iniziato a indagare sulle soluzioni dei moduli React e ho iniziato seguendo la documentazione fornita dal team di React. Gli esempi erano molto semplici e fornivano solo una piccola parte della soluzione.

class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( Name: ); } }

Questo è l'esempio di base fornito da React. Sembrava abbastanza facile iniziare, ma non mi piaceva davvero quanto codice standard fosse necessario per creare solo questo singolo modulo. Immagina come apparirebbe questo file se avessi 10 campi modulo con gestori onChange personalizzati. Oltre a dover associare i metodi onChange e onSubmit, avrei bisogno di introdurre una soluzione di convalida e sapere se un campo è stato toccato o conteneva un errore.



Ho bisogno di un componente di classe solo per impostare i valori del modulo predefinito nello stato?

Andando avanti

Dopo aver valutato l'approccio fai-da-te e aver esaminato alcune librerie di moduli più piccole, ho deciso che era ora di iniziare a esaminare altri pacchetti che potessero aiutare a creare una soluzione di moduli completa e schemi di convalida.



visualizza l'app per i tweet protetti

I moduli Formik e Redux sembravano essere le librerie più popolari che i team stanno utilizzando ora. Il nostro team non aveva ancora introdotto Redux, quindi ho deciso di saltarlo per ora. Inoltre, nella maggior parte dei casi non sembrava una best practice mantenere i valori del modulo in una soluzione di gestione dello stato globale.

I valori del modulo sono generalmente archiviati nello stato locale, non nello stato globale.

Formik è consigliato dal team di React come soluzione completa e può gestire la convalida, i collegamenti di input, nonché errori e modifiche di stato. Con questa raccomandazione, ho deciso di saperne di più e creare alcuni esempi di test da portare al mio team.

dove acquistare icon crypto

Formica

Il sito Web di Formik afferma di aiutarti con i problemi più fastidiosi dei moduli:

  1. Ottenere valori dentro e fuori dallo stato della forma
  2. Convalida e messaggi di errore
  3. Gestione dell'invio del modulo

Dopo aver creato personalmente alcuni moduli utilizzando Formik, posso vedere come questi problemi comuni scompaiono. I valori del modulo non sono archiviati nello stato, quindi non è necessario associarli manualmente a un input. Invece, Formik cancella l'attributo name ed esegue l'associazione automaticamente.

Esistono due modi per utilizzare Formik: creare un componente di ordine superiore o creare un componente Formik per avvolgere il modulo.

Quando avvolgi il tuo modulo in un componente Formik, il figlio è una funzione e non un componente. Questa funzione accetta un argomento che è una varietà di oggetti di scena che Formik ti passa per gestire lo stato. Ciò aiuta a ridurre il codice standard coinvolto nella creazione di un modulo fornendo le seguenti props predefinite: handleSubmit, handleChange, initialValues, validation e altro.

L'uso di Formik ci ha permesso di creare i nostri componenti di moduli riutilizzabili che sono stati un fattore importante nella nostra decisione di utilizzare la libreria. Rende indolore la creazione di nuove forme e ci permette di testarle facilmente.

import { Formik } from 'formik'; { // handle submit }} validationSchema={loginValidation} > {props => { const { values, touched, errors, dirty, isSubmitting, handleChange, handleBlur, handleSubmit, handleReset } = props; return ( )

Strumenti di sviluppo React Componente

nodo js sql injection

Formik è una soluzione di input controllato, il che significa che i valori del modulo vengono gestiti dai componenti e non acquisiti dal DOM in un secondo momento. Consulta la documentazione del team React su forme controllate e non controllate .

Convalida Formik e Sì

Una parte altrettanto importante di qualsiasi soluzione di modulo è la convalida. Formik ti consente di scegliere o scrivere la tua convalida ed è molto facile iniziare.

Il team di Formik adora la libreria di convalida Yup, quindi ha creato un supporto specifico per Yup chiamato validationSchema che trasforma gli errori in oggetti e corrisponde ai loro valori e alle funzioni toccate.

Uno schema Yup è un oggetto immutabile responsabile della convalida di un oggetto.

const signupValidationSchema = Yup.object().shape({ FirstName: Yup.string() .max(40, 'Please enter no more than 40 characters') .required( 'Please enter your first name' ), LastName: Yup.string() .max(40, 'Please enter no more than 40 characters') .required('Please enter a last name'), Email: Yup.string() .email('Please enter a valid email') .required('Please enter an email') });

L'oggetto di convalida ti dà accesso ai valori degli input controllati e viene eseguito su ogni onChange. Sì, quindi restituisce un oggetto di errore con tutti i nostri messaggi di convalida. Di seguito è riportato il codice che verrebbe duplicato per ogni input.

{errors.firstName && touched.firstName ? ( {errors.firstName} ) : null}

Fortunatamente Formik fornisce un componente che visualizzerà un errore se l'attributo del nome corrisponde all'input. Questo è molto più pulito e, ancora una volta, ci salva dalla riscrittura dei condizionali per ogni campo del modulo.

{msg => {msg} }

Il nostro team ha creato uno schema di convalida Yup separato e poi lo ha importato nel nostro modulo.

Asporto

Formik è un'ottima soluzione per provare se il tuo team lavorerà con più moduli. Consente uno sviluppo rapido e la libertà di creare i propri componenti del modulo. Questa libreria è considerata attendibile dalla community e attualmente ha oltre 250.000 download settimanali.

Sì, la convalida funziona molto bene con Formik e offre un'ampia documentazione API.

compra bytecoin con usd

Se hai avuto problemi in passato con i moduli o sei appena agli inizi, ti consiglio vivamente di guardare queste opzioni. Riduci quella quantità di codice standard e rendi di nuovo divertenti i moduli!

attributierror: l'oggetto 'dict' non ha attributo 'iterkeys'

? 30s ad

? Master ReactJS: impara React JS da zero

? Impara ReactJS: codice come uno sviluppatore di Facebook

? Corso ReactJS: impara la libreria JavaScript utilizzata da Facebook&IG

? React: impara i fondamenti di ReactJS per sviluppatori front-end

? Reagisci da zero

#reactjs #javascript