Gestisci lo stato del modulo reagire con FORMIK

Sep 11, 2025

Come si fa

(Immagine di immagine: Matt Crouch)

Benvenuti nella nostra guida su come gestire il modulo di reagire Stato con FORMIK. Gli elementi del modulo tengono i loro valori nel proprio stato interno - in disaccordo con l'approccio guidato dal react. Per rendere i due lavori insieme, abbiamo bisogno di una soluzione più coinvolta, come utilizzare componenti controllati per ciascun campo.

Ma ci sono molti più aspetti per creare un modulo che semplicemente catturare i dati. Dobbiamo controllare che la formattazione sia corretta, sono stati impostati tutti i campi richiesti e che tutto è stato inviato con successo se inviato. Ciò porta a molta logica complicata che può accumularsi velocemente. È qui che Forik può aiutare.

Per maggiori risorse per aiutare a migliorare il tuo web design, dai un'occhiata al nostro rundown di Strumenti di progettazione Web. e deposito cloud. opzioni. Iniziando da zero? Scegli il giusto Builder del sito web e prendi il tuo web hosting Servizio a destra con i nostri Roundups.

Scarica i file di origine

Cos'è il formato?

Filik. è una biblioteca leggera che gestisce questi problemi. Avvolgendo un modulo con i componenti forniti, otteniamo molto questo comportamento gratuitamente. Tutto ciò di cui abbiamo bisogno per fornire è il codice da gestire ciò che rende il nostro modulo unico.

Per aiutarci ad esplorare cosa può fare Formik, costrueremo una piccola applicazione di voto. L'utente può inserire il loro nome e votare su una delle opzioni fornite. Se tutto va bene, il modulo invierà ma, in caso contrario, l'utente riceve un messaggio di errore.

01. Inizia

Per iniziare, aprire la directory 'tutorial' dai file tutorial sulla riga di comando. Installare le dipendenze e avviare il server. Questa app è basata su Creat-React-App e include i suoi pacchetti, insieme a Formik stesso e un paio di altri per aiutare con lo styling.

 & GT; Installazione NPM.
& GT; NPM START

Il server di sviluppo avvierà e l'applicazione si apre quindi nel browser. Il file App.JS controlla l'intera applicazione che renderà il nostro componente del contenitore per il modulo. Aprire SRC / App.JS. e importare il & lt; votoContainer & GT; componente.

 Import VoteContainer da "./voteContainer";

Quindi aggiungilo nell'applicazione.

 & lt; Sezione className = "Vota-Container" & GT;
  & lt; votoContainer / & GT;
& lt; / Sezione & GT;

02. Crea forma di Formik

I moduli di Formik possono essere creati in due modi. Il withforformk. Componente di ordine superiore ci consente di avvolgere un componente esistente o utilizzare il & lt; Formik & GT; Componente con un puntello di rendering che esegue la stessa funzione, che è ciò che useremo.

Dentro VoteContainer.js, creare un componente funzionale che tiene tutta la logica per il modulo. Questo restituisce A. & lt; Formik & GT; Componente che rende la nostra forma. Fornire un valore iniziale per i campi che aggiungeremo più avanti attraverso il inizialivalues. puntello.

 Importa {Formik} da "Formik";
Vota di importazione da "./vote";

Funzione VoteContainer () {
  ritorno e lt; forma
    InitialValues = {{Nome: "", Risposta: ""}}
render = {puntelli = & gt; & lt; voto {... puntelli} / & gt;} / & gt;

03. Creare il componente del voto

Il & lt; voto & gt; Il componente tiene la struttura del modulo. Avere la logica di Formik separata possiamo mantenere il componente del modulo il più semplice possibile.

Creare un componente voto all'interno del voto.js che fa uso del & lt; Form & GT; Componente da Formik. Aggiungi un pulsante per inviare il modulo normale.

 Importa {modulo} da "Formik";
Vota funzione () {
  ritorno (
    & lt; forma classname = "vota" e gt;
      & lt; Input Type = "Invia" Value = "Vota ora" / & GT;
    & lt; / Form & GT;
  );
}

04. Aggiungi campi

Formik tiene traccia delle modifiche a ciascun campo e fornirà loro una volta inviato il modulo. Lo fa tutto questo attraverso gli eventi emessi dalla forma e da ciascun campo al suo interno.

A un livello modulo ci sono due eventi specifici: inviare e reset. Quando un modulo si sottomette, abbiamo bisogno di FORMIK per assumere ed eseguire i suoi assegni, con l'evento di reset che compensa lo stato. L'importato & lt; Form & GT; Il componente lega a questi eventi a Formik.

Ora possiamo iniziare ad aggiungere il nostro primo campo. Ogni voto deve essere accompagnato da un nome, il che significa che abbiamo bisogno di un input di testo prima.

Il & lt; field & gt; Il componente fa lo stesso lavoro di & lt; Form & GT; fa per tutta la forma. Ascolta gli eventi e gli oggetti di scena necessari come un nome e un valore per visualizzare lo stato del campo.

Aggiungi un campo nel modulo e collegalo a un'etichetta. Questi funzionano come avrebbero in regolari moduli HTML.

 Importa {campo} da "Formik";
& lt; etichetta htmlfor = "nome" e gt; nome & lt; / etichetta e gt;
& lt; campo AUTOCOMPLETE = "Nome" ID = "Nome" Nome = "Nome" Type = "Testo" / & GT;

05. Logica di fornitura

Non abbiamo bisogno di lavorare con eventi del browser da inviare, come il onsubmit. L'evento è gestito per noi. Ma abbiamo bisogno di fornire la logica per gestire la sottomissione. La callback è ancora chiamata onsubmit. Ma invece riceve direttamente i valori della forma. Riceve anche la "borsa" - un oggetto contenente alcuni metodi per interagire con il modulo mentre si invia.

Poiché questi dati tiranno in genere a un server, questa funzione può anche essere asincrona. Formik ha uno speciale iscrivero Prop che imposta automaticamente il vero tempo stesso una volta che inizia la presentazione. Con una funzione Async, possiamo attendere fino a quando il modulo non è stato inviato e impostato in falso.

Torna in VoteContainer.js, possiamo aggiungere la nostra logica di invio. Crea la funzione e passalo al & lt; Formik & GT; componente. Per questo esempio, non invieremo un server ma possiamo usare una promessa ritardata per simulare la latenza di rete.

 Const Onsubmit = Async (valori, borsa) = & GT; {
    Attendi la nuova promessa (risoluzione = & gt; sextimeout (risoluzione, 1000));
    borsa.setsubmitting (false);
    console.log ("modulo inviato", valori);
  };;
return & lt; filik [...] onsubmit = {onsubmit} / & gt ;;

06. Stato di visualizzazione

Dobbiamo anche mostrare che inviare lo stato all'interno del modulo. Per evitare una doppia presentazione, possiamo disabilitare il pulsante mentre il modulo è invio. Formik lo passa nella forma all'interno del voto.js come prop. Possiamo estrarlo e applicarlo al pulsante.

 Vota della funzione ({ISSUBMETTE}) {[...]}
& lt; Input; Input Disabilitato = {ISSUBMETTE} Type = "Invia" Value = "Vota ora" / & GT;

07. Aggiungi campo Nome

Al momento il modulo può essere inviato senza essere inserito un nome. Poiché questo è un campo obbligatorio, dovremmo aprirlo all'utente.

La radice & lt; Formik & GT; Componente prende anche un Prop Convalida, che è una funzione che esegue la convalida e restituisce un oggetto. Ogni coppia di valore chiave rappresenta un campo e un messaggio di errore. Se un campo non ha valore in questo oggetto, è considerato valido. Il modulo invierà solo quando questa funzione restituirà un oggetto vuoto. La funzione riceve i valori del modulo come argomento. Per un campo obbligatorio, abbiamo solo bisogno di controllare che il valore non sia una stringa vuota.

Indietro Inside VoteContainer.js, crea una funzione di callback convalida per controllare questo valore e agganciarlo a Formik.

 const validate = valori = & gt; {
    ERRORS CONST = {};
    if (valori.name === "") {
      errors.name = "è richiesto il nome";
    }
    Errori di restituzione;
  };;
return & lt; formico [...] validate = {convalida} / & gt ;;

08. Visualizza errori

Questi errori vengono quindi passati a vote.js come errori Prop. Per visualizzare gli errori in linea, è necessario abbinare gli errori al particolare campo della forma.

 Vota della funzione ({ISSUBMOTICI, ERRORI, TOCKED}) {[...]}
& lt; div classname = "ingresso-gruppo" e GT;
  & lt; etichetta htmlfor = "nome" e gt; nome & lt; / etichetta e gt;
  & lt; div; div
    classname = {classnamames ({
      "Gruppo di convalida": vero,
      Errore: !! ERRORS.NAME & AMP; & AMP; toccato.name.
    })}
  & GT;
    & lt; campo AUTOCOMPLETE = "Nome" ID = "Nome" Nome = "Nome" Type = "Testo" / & GT;
    {!! Errors.name & amp; & amp; toccato. Name & amp; & amp; (
      & lt; div classname = "error-messaggio" & gt; {errors.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik convalida la forma ogni volta che si aggiorna. Una forma con un sacco di campi sarebbe immediatamente sommersa con errori dopo il primo cambiamento. Per evitare ciò, mostriamo solo l'errore quando un campo è stato "toccato", il che significa che è stato interagito ad un certo punto. Quando un modulo si sottomette, Formik toccherà tutti i campi e mostrano errori nascosti.

09. Aggiungi campo Risposta

Con il campo Nome completo, possiamo passare alle risposte. L'approccio che abbiamo usato finora funziona bene per ingressi di testo regolari, ma non è adatto a più ingressi che rientrano nello stesso nome del campo, come un gruppo di pulsanti radio.

Mentre possiamo includere più & lt; field & gt; Componenti con lo stesso nome, dovremmo evitare di ripeterci il più possibile. Invece, Formik ci consente di passare un componente personalizzato in & lt; campo & GT; che può gestirli come uno.

Il & lt; risposta gruppo e GT; Componente funziona in modo simile all'ingresso del testo. Ci vuole un Prop di opzioni, che è un array contenente le opzioni da visualizzare. Questi vengono trasformati in pulsanti di radio stilizzati che consentono agli utenti di scegliere una risposta. Includi questo componente all'interno del voto.js. Usando & lt; field & gt; viene superato gli stessi oggetti di scena come input del nome e di qualsiasi extra, in questo caso il OPZIONI costante.

 Import Answergroup da "./answergroup";
& lt; campo componente = {answergroup} opzioni = {options} Nome = "Risposta" / & GT;

Infine, dobbiamo richiedere una risposta nella nostra funzione di convalida in VoteContainer.js pure. Il processo è lo stesso del campo del nome.

 IF (valori.answer === "") {
  errors.answer = "è richiesto la risposta";

Mantenendo la convalida e la logica di sottomissione separata e l'uso di Formik per cucire tutto insieme, siamo in grado di mantenere ogni pezzo piccolo e facile da capire.

Questo contenuto è apparso originariamente in Magazine netta . Leggi di più del nostro articoli di web design qui .

Per saperne di più:

Come testare i siti e le app reagire
6 enormi tendenze del web design per il 2020
Master Minimalism nel web design

Gestisci lo stato del modulo reagire con FORMIK

Cos'è il formato?

01. Inizia

02. Crea forma di Formik

03. Creare il componente del voto

04. Aggiungi campi

05. Logica di fornitura

06. Stato di visualizzazione

07. Aggiungi campo Nome

08. Visualizza errori

09. Aggiungi campo Risposta

Come si fa - Articoli più popolari

Cinema 4d Tutorials: 13 del meglio

Come rimuovere le rughe in Photoshop

Come impostare un ambiente di sviluppo locale

Come disegnare un elefante

Come usare i livelli intelligenti in Photoshop

Colourise GreyScale Lavora in Photoshop

Costruisci app che funzionano offline

Creature organiche in inchiostro

Categorie