Cum să utilizați Formik pentru a crea formulare în React

Formik este o bibliotecă de gestionare a formularelor care oferă componente și cârlige pentru a ușura procesul de creare a formularelor React. Formik se ocupă de stările formularelor, de validare și de gestionarea erorilor pentru dvs., ceea ce facilitează colectarea și stocarea datelor utilizatorilor.

În acest tutorial, veți afla cum puteți crea un formular de înregistrare în React folosind Formik. Pentru a urma, ar trebui să vă simțiți confortabil să lucrați cu cârligele React.

Creați o aplicație React

Utilizați aplicația create-react-pentru creați un nou proiect React:

npx create-react-app formik-form

Acum, navigați la formik-form/src folder și ștergeți toate fișierele, cu excepția App.js.

Apoi, creați un fișier nou și denumiți-l Register.js. Aici vei adăuga formularul. Nu uitați să-l importați App.js.

Creați un formular de reacție

Puteți crea formulare React folosind fie componente controlate, fie componente necontrolate. O componentă controlată este una ale cărei date de formular sunt gestionate de React însuși. O componentă necontrolată este una ale cărei date de formular sunt gestionate de DOM.

Oficialul Reacționează documentele recomandă utilizarea componentelor controlate. Acestea vă permit să urmăriți datele formularului în statul local și, prin urmare, să aveți control deplin asupra formularului.

Mai jos este un exemplu de formular creat folosind o componentă controlată.

import { useState } din "react";
const Register = () => {
 const [email, setemail] = useState("");
 const [parolă, setparolă] = useState("");
 const handleSubmit = (eveniment) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (eveniment) => {
 setemail (event.target.value);
 };
 const handlePassword = (eveniment) => {
 setpassword (event.target.value);
 };
 întoarcere (


 id="email"
 name="email"
 tip="e-mail"
 placeholder="Adresa ta de e-mail"
 valoare={e-mail}
 onChange={handleEmail}
 />
 id="parolă"
 nume="parolă"
 tip="parolă"
 placeholder="Parola ta"
 valoare={parolă}
 onChange={handlePassword}
 />




 );
};
export implicit Registrul;

În codul de mai sus, ești inițializarea stării și crearea unei funcții de gestionare pentru fiecare câmp de intrare. În timp ce acest lucru funcționează, codul dvs. poate deveni cu ușurință repetitiv și aglomerat, în special cu multe câmpuri de intrare. Adăugarea de validare și de gestionare a mesajelor de eroare este o altă provocare.

Formik are ca scop reducerea acestor probleme. Face ușor gestionarea stării formularului, validarea și trimiterea datelor din formular.

Adaugă Formik la React

Înainte de utilizare formik, adăugați-l la proiectul dvs. folosind npm.

npm instalează formik

Pentru a integra Formik, veți folosi foloseșteFormik cârlig. În Register.js, importați useFormik în partea de sus a fișierului:

import { useFormik } din „formik”

Primul pas este inițializarea valorilor formularului. În acest caz, veți inițializa e-mailul și parola.

const formik = useFormik({
 initialValues: {
 e-mail: "",
 parola: "",
 },
 onSubmit: values ​​=> {
// gestionează trimiterea formularului
 },
});

De asemenea, adăugați funcția onSubmit care primește valorile formularului și se ocupă de trimiterea formularului. Pentru un formular de înregistrare ca acesta, aceasta ar putea însemna crearea unui nou utilizator în baza de date.

Următorul pas este să utilizați formik obiect pentru a obține valorile formei în și în afara stării.

 id="email"
 name="email"
 tip="e-mail"
 placeholder="Adresa ta de e-mail"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="parolă"
 nume="parolă"
 tip="parolă"
 placeholder="Parola ta"
 valoare={formik.values.parola}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

În codul de mai sus, ești:

• Oferând câmpurilor de intrare un id și Nume valoare egală cu cea utilizată în timpul inițializării în foloseșteFormik cârlig.
• Accesarea valorii unui câmp, folosind numele acestuia pentru a-l recupera formik.valori.
• Legare formik.handleChange la evenimentul onChange pentru a afișa valorile de intrare pe măsură ce utilizatorul introduce.
• Folosind formik.mânerBlur pentru a ține evidența câmpurilor vizitate.
• Legare formik.handleSubmit la onSubmit eveniment pentru a declanșa onSubmit funcția pe care ați adăugat-o la foloseșteFormik cârlig.

Activați validarea formularului

Când creați un formular, este important să validați intrarea utilizatorului pe măsură ce o face autentificarea utilizatorului ușor, deoarece stocați datele doar în formatul corect. În formularul dvs., de exemplu, puteți verifica dacă e-mailul dat este valid și dacă parola are mai mult de 8 caractere.

Pentru a valida formularul, definiți o funcție de validare care acceptă valorile formularului și returnează un obiect de eroare.

Dacă adăugați funcția de validare la foloseșteFormik, orice eroare de validare găsită va fi disponibilă în Formik.erori, indexat pe numele de intrare. De exemplu, puteți accesa o eroare despre câmpul de e-mail folosind Formik.errors.email.

În Register.js, creați valida funcția și includeți-l în foloseșteFormik.

const formik = useFormik({
 initialValues: {
 e-mail: "",
 parola: "",
 },
 validați: () => {
 const erori = {};
 console.log (erori)
 dacă (!formik.values.email) {
 errors.email = „Necesar”;
 } altfel dacă (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 errors.email = „Adresă de e-mail nevalidă”;
 }
 dacă (!formik.values.parola) {
 errors.password = „Necesar”;
 } else if (formik.values.password.length < 8) {
 errors.password = „Trebuie să aibă 8 caractere sau mai mult”;
 }
 returnează erori;
 },
 onSubmit: (valori) => {
 console.log("trimis!");
 // se ocupă de transmitere
 },
});

Adăugați gestionarea erorilor

Apoi, afișați mesajele de eroare dacă există. Utilizare Formik.atins pentru a verifica dacă câmpul a fost vizitat. Acest lucru previne afișarea unei erori pentru un câmp pe care utilizatorul nu l-a vizitat încă.

 id="email"
 name="email"
 tip="e-mail"
 placeholder="Adresa ta de e-mail"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: nul}
 id="parolă"
 nume="parolă"
 tip="parolă"
 placeholder="Parola ta"
 valoare={formik.values.parola}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.parola && formik.errors.parola? 
{formik.errors.parola}
: nul}

Validați datele folosind Yup

Formik oferă o modalitate mai ușoară de a valida formularele folosind Da bibliotecă. Instalați yup pentru a începe.

npm instalează da

Import Da în Register.js.

import * ca Da din „da”

În loc să scrieți propria funcție de validare personalizată, utilizați Yup pentru a verifica dacă e-mailul și parola sunt valide.

const formik = useFormik({
 initialValues: {
 e-mail: "",
 parola: "",
 },
 validationSchema: Da.object().shape({
 e-mail: Yup.string()
 .email(„Adresă de e-mail nevalidă”)
 .required(„Necesar”),
 parola: Yup.string()
 .min (8, „Trebuie să aibă 8 caractere sau mai mult”)
 .required(„Necesar”)
 }),
 onSubmit: (valori) => {
 console.log("trimis!");
// se ocupă de transmitere
 },
});

Si asta e! Ați creat un formular simplu de înregistrare folosind Formik și Yup.

Încheierea Totului

Formularele sunt parte integrantă a oricărei aplicații, deoarece vă permit să colectați informații despre utilizator. În React, crearea de formulare poate fi o experiență dureroasă, mai ales dacă aveți de-a face cu multe date sau cu mai multe forme. Un instrument precum Formik oferă o modalitate simplă și simplă de a prelua și valida valorile formularului.

10 React Cele mai bune practici pe care trebuie să le urmați în 2022

Citiți în continuare

Despre autor