Come utilizzare Formik per creare moduli in React

Formik è una libreria di gestione dei moduli che fornisce componenti e hook per facilitare il processo di creazione dei moduli React. Formik si occupa per te degli stati dei moduli, della convalida e dei gestori degli errori, il che semplifica la raccolta e l'archiviazione dei dati degli utenti.

In questo tutorial imparerai come creare un modulo di registrazione in React usando Formik. Per seguire, dovresti sentirti a tuo agio nel lavorare con i ganci React.

Crea un'app Reagire

Usa create-react-app per creare un nuovo progetto React:

npx create-react-app formik-form

Ora, vai a formik-form/src cartella ed elimina tutti i file tranne App.js.

Quindi, crea un nuovo file e assegnagli un nome Register.js. Qui è dove aggiungerai il tuo modulo. Ricordati di importarlo App.js.

Crea un modulo di reazione

Puoi creare moduli React utilizzando componenti controllati o componenti non controllati. Un componente controllato è uno i cui dati del modulo sono gestiti da React stesso. Un componente non controllato è quello i cui dati del modulo sono gestiti dal DOM.

L'ufficiale Reagisci documenti consiglia di utilizzare componenti controllati. Ti consentono di tenere traccia dei dati del modulo nello stato locale e quindi di avere il pieno controllo del modulo.

Di seguito è riportato un esempio di un modulo creato utilizzando un componente controllato.

importa {useState} da "reagire";
const Registro = () => {
 const [email, setemail] = useState("");
 const [password, setpassword] = useState("");
 const handleSubmit = (evento) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (evento) => {
 setmail (event.target.value);
 };
 const handlePassword = (evento) => {
 setpassword (event.target.value);
 };
 Restituzione (


 id="e-mail"
 nome="e-mail"
 digita = "e-mail"
 placeholder="La tua email"
 valore={email}
 onChange={handleEmail}
 />
 id="password"
 nome = "password"
 digita = "password"
 placeholder="La tua password"
 valore={password}
 onChange={handlePassword}
 />




 );
};
esportazione registro predefinito;

Nel codice sopra, lo sei inizializzare lo stato e creare una funzione di gestione per ogni campo di input. Mentre funziona, il tuo codice può facilmente diventare ripetitivo e disordinato, specialmente con molti campi di input. L'aggiunta di convalida e gestione dei messaggi di errore è un'altra sfida.

Formik mira a ridurre questi problemi. Semplifica la gestione dello stato del modulo, la convalida e l'invio dei dati del modulo.

Aggiungi Formik a Reagire

Prima di usare formik, aggiungilo al tuo progetto usando npm.

npm installa formik

Per integrare Formik, utilizzerai il usa Formik gancio. In Register.js, importa useFormik nella parte superiore del file:

importa { useFormik } da "formik"

Il primo passaggio consiste nell'inizializzazione dei valori del modulo. In questo caso, inizializzerai l'e-mail e la password.

const formik = usaFormik({
 valori iniziali: {
 e-mail: "",
 parola d'ordine: "",
 },
 onSubmit: valori => {
// gestisce l'invio del modulo
 },
});

Stai anche aggiungendo la funzione onSubmit che riceve i valori del modulo e gestisce l'invio del modulo. Per un modulo di registrazione come questo, ciò potrebbe significare la creazione di un nuovo utente nel database.

Il prossimo passo è usare il formik oggetto per ottenere i valori del modulo dentro e fuori lo stato.

 id="e-mail"
 nome="e-mail"
 digita = "e-mail"
 placeholder="La tua email"
 valore={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="password"
 nome = "password"
 digita = "password"
 placeholder="La tua password"
 valore={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

Nel codice sopra, sei:

• Dando ai campi di input un id e nome valore uguale a quello utilizzato durante l'inizializzazione in usa Formik gancio.
• Accedere al valore di un campo, utilizzando il suo nome per recuperarlo valori.formik.
• Rilegatura formik.handleChange all'evento onChange per visualizzare i valori di input mentre l'utente digita.
• Usando formik.handleBlur per tenere traccia dei campi visitati.
• Rilegatura formik.handleSubmit al onSubmit evento per attivare il onSubmit funzione che hai aggiunto a usa Formik gancio.

Abilita la convalida del modulo

Quando si crea un modulo, è importante convalidare l'input dell'utente mentre lo fa autenticazione utente facile poiché memorizzi solo i dati nel formato corretto. Nel tuo modulo, ad esempio, puoi verificare se l'e-mail fornita è valida e se la password contiene più di 8 caratteri.

Per convalidare il modulo, definire una funzione di convalida che accetti i valori del modulo e restituisca un oggetto di errore.

Se aggiungi la funzione di convalida a usa Formik, qualsiasi errore di convalida trovato sarà disponibile in Errori.formik, indicizzato sul nome di input. Ad esempio, puoi accedere a un errore relativo al campo e-mail utilizzando Formik.errors.email.

In Register.js, crea il convalidare funzionare e includerlo usa Formik.

const formik = usaFormik({
 valori iniziali: {
 e-mail: "",
 parola d'ordine: "",
 },
 convalida: () => {
 errori const = {};
 console.log (errori)
 se (!formik.values.email) {
 errors.email = "Richiesto";
 } altrimenti se (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = "Indirizzo email non valido";
 }
 if (!formik.values.password) {
 errors.password = "Richiesto";
 } else if (formik.values.password.length < 8) {
 errors.password = "Devono contenere almeno 8 caratteri";
 }
 restituire errori;
 },
 onSubmit: (valori) => {
 console.log("inviato!");
 // gestisce l'invio
 },
});

Aggiungi Gestione errori

Quindi, visualizzare i messaggi di errore se esistono. Utilizzo Formik.toccato per verificare se il campo è stato visitato. Ciò impedisce di visualizzare un errore per un campo che l'utente non ha ancora visitato.

 id="e-mail"
 nome="e-mail"
 digita = "e-mail"
 placeholder="La tua email"
 valore={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nullo}
 id="password"
 nome = "password"
 digita = "password"
 placeholder="La tua password"
 valore={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: nullo}

Convalida i dati utilizzando Yup

Formik fornisce un modo più semplice per convalidare i moduli utilizzando Sì biblioteca. Installa yup per iniziare.

npm installa sì

Importare Sì in Register.js.

importa * come Yup da "yup"

Invece di scrivere la tua funzione di convalida personalizzata, usa Yup per verificare se l'e-mail e la password sono valide.

const formik = usaFormik({
 valori iniziali: {
 e-mail: "",
 parola d'ordine: "",
 },
 validationSchema: Yup.object().shape({
 email: Yup.string()
 .email("Indirizzo email non valido")
 .required("Obbligatorio"),
 password: Yup.string()
 .min (8, "Devono contenere almeno 8 caratteri")
 .required("Obbligatorio")
 }),
 onSubmit: (valori) => {
 console.log("inviato!");
// gestisce l'invio
 },
});

E questo è tutto! Hai creato un semplice modulo di registrazione utilizzando Formik e Yup.

Avvolgere tutto

I moduli sono parte integrante di qualsiasi applicazione in quanto consentono di raccogliere informazioni sull'utente. In React, la creazione di moduli può essere un'esperienza dolorosa soprattutto se hai a che fare con molti dati o più moduli. Uno strumento come Formik fornisce un modo semplice e senza interruzioni per recuperare e convalidare i valori dei moduli.

10 migliori pratiche di reazione che devi seguire nel 2022

Leggi Avanti

Circa l'autore