Jak używać Formika do tworzenia formularzy w React

Formik to biblioteka do zarządzania formularzami, która zapewnia komponenty i haki ułatwiające proces tworzenia formularzy React. Formik zajmuje się stanami formularzy, walidacją i obsługą błędów, co ułatwia zbieranie i przechowywanie danych użytkowników.

W tym samouczku dowiesz się, jak utworzyć formularz rejestracyjny w React za pomocą Formika. Aby kontynuować, powinieneś czuć się komfortowo podczas pracy z hakami React.

Utwórz aplikację React

Użyj aplikacji create-react do stworzyć nowy projekt React:

npx utwórz-reaguj-aplikację formik-form

Teraz przejdź do formik-form/src folder i usuń wszystkie pliki z wyjątkiem App.js.

Następnie utwórz nowy plik i nazwij go Register.js. Tutaj dodasz swój formularz. Pamiętaj, aby zaimportować go w App.js.

Utwórz formularz reakcji

Możesz tworzyć formularze React przy użyciu kontrolowanych lub niekontrolowanych komponentów. Kontrolowany komponent to taki, którego dane formularza są obsługiwane przez sam React. Niekontrolowany składnik to taki, którego dane formularza są obsługiwane przez DOM.

Oficjalny Reaguj na dokumenty Zalecamy używanie kontrolowanych komponentów. Pozwalają śledzić dane formularza w stanie lokalnym, dzięki czemu mają pełną kontrolę nad formularzem.

Poniżej znajduje się przykład formularza utworzonego przy użyciu kontrolowanego komponentu.

importuj { useState } z "react";
const Rejestr = () => {
 const [email, setemail] = useState("");
 const [hasło, setpassword] = useState("");
 const handlePrześlij = (zdarzenie) => {
 event.preventDefault();
 console.log (e-mail);
 };
 const handleEmail = (zdarzenie) => {
 setemail (event.target.value);
 };
 const handlePassword = (zdarzenie) => {
 setpassword (event.target.value);
 };
 zwrócić (


 id="e-mail"
 name="e-mail"
 type="e-mail"
 placeholder="Twój e-mail"
 wartość={e-mail}
 onChange={handleEmail}
 />
 id="hasło"
 name="hasło"
 type="hasło"
 placeholder="Twoje hasło"
 wartość={hasło}
 onChange={handlePassword}
 />




 );
};
eksportuj domyślny Rejestr;

W powyższym kodzie jesteś inicjowanie stanu i tworzenie funkcji obsługi dla każdego pola wejściowego. Chociaż to działa, Twój kod może łatwo stać się powtarzalny i zaśmiecony, zwłaszcza w przypadku wielu pól wejściowych. Kolejnym wyzwaniem jest dodanie walidacji i obsługi komunikatów o błędach.

Formik ma na celu ograniczenie tych problemów. Ułatwia obsługę stanu formularza, sprawdzanie poprawności i przesyłanie danych formularza.

Dodaj Formika do reakcji

Przed użyciem formik, dodaj go do swojego projektu za pomocą npm.

npm zainstaluj formik

Aby zintegrować Formik, użyjesz: użyjFormik hak. W Register.js, zaimportuj useFormik na górze pliku:

importuj { useFormik } z "formik"

Pierwszym krokiem jest zainicjowanie wartości formularza. W takim przypadku zainicjujesz adres e-mail i hasło.

const formik = useFormik({
 Wartości początkowe: {
 e-mail: "",
 hasło: "",
 },
 onSubmit: wartości => {
// obsłuż przesyłanie formularzy
 },
});

Dodajesz również funkcję onSubmit, która odbiera wartości z formularza i obsługuje przesyłanie formularza. W przypadku takiego formularza rejestracyjnego może to oznaczać utworzenie nowego użytkownika w bazie danych.

Następnym krokiem jest użycie formik obiekt, aby uzyskać wartości formularza i wyjść ze stanu.

 id="e-mail"
 name="e-mail"
 type="e-mail"
 placeholder="Twój e-mail"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 id="hasło"
 name="hasło"
 type="hasło"
 placeholder="Twoje hasło"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

W powyższym kodzie jesteś:

• Podanie pól wejściowych i ID oraz nazwać wartość równa tej użytej podczas inicjalizacji w użyjFormik hak.
• Uzyskiwanie dostępu do wartości pola, używanie jego nazwy do jej pobrania formik.wartości.
• Wiążący formik.handleChange do zdarzenia onChange, aby wyświetlić wartości wejściowe jako typy użytkowników.
• Za pomocą formik.handleBlur aby śledzić odwiedzone pola.
• Wiążący formik.handleWyślij do onSubmit zdarzenie wyzwalające onSubmit funkcja, którą dodałeś do użyjFormik hak.

Włącz weryfikację formularza

Podczas tworzenia formularza ważne jest, aby zweryfikować dane wprowadzone przez użytkownika, ponieważ to sprawia, że uwierzytelnianie użytkownika łatwe, ponieważ przechowujesz dane tylko we właściwym formacie. W formularzu możesz na przykład sprawdzić, czy podany adres e-mail jest prawidłowy i czy hasło ma więcej niż 8 znaków.

Aby sprawdzić poprawność formularza, zdefiniuj funkcję walidacji, która akceptuje wartości formularza i zwraca obiekt błędu.

Jeśli dodasz funkcję walidacji do użyjFormik, każdy znaleziony błąd sprawdzania poprawności będzie dostępny w Formik.błędy, indeksowane według nazwy wejściowej. Na przykład możesz uzyskać dostęp do błędu dotyczącego pola e-mail za pomocą Formik.błędy.e-mail.

W Register.js, utwórz uprawomocnić funkcja i uwzględnij ją w użyjFormik.

const formik = useFormik({
 Wartości początkowe: {
 e-mail: "",
 hasło: "",
 },
 zatwierdź: () => {
 błędy const = {};
 console.log (błędy)
 if (!formik.values.email) {
 error.email = "Wymagane";
 } inaczej, jeśli (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 error.email = "Nieprawidłowy adres e-mail";
 }
 if (!formik.values.password) {
 error.password = "Wymagane";
 } else if (formik.values.password.length < 8) {
 error.password = "Musi mieć 8 znaków lub więcej";
 }
 zwracać błędy;
 },
 onSubmit: (wartości) => {
 console.log("przesłano!");
 // obsługuj składanie
 },
});

Dodaj obsługę błędów

Następnie wyświetl komunikaty o błędach, jeśli istnieją. Posługiwać się Formik.dotknięty aby sprawdzić, czy pole zostało odwiedzone. Zapobiega to wyświetlaniu błędu dla pola, którego użytkownik jeszcze nie odwiedził.

 id="e-mail"
 name="e-mail"
 type="e-mail"
 placeholder="Twój e-mail"
 value={formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.błędy.e-mail}
: zero}
 id="hasło"
 name="hasło"
 type="hasło"
 placeholder="Twoje hasło"
 value={formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.błędy.hasło}
: zero}

Sprawdź poprawność danych za pomocą Yup

Formik zapewnia łatwiejszy sposób sprawdzania poprawności formularzy za pomocą tak biblioteka. Zainstaluj tak, aby rozpocząć.

npm instaluj tak

Import tak w Register.js.

importuj * jako Yup z „yup”

Zamiast pisać własną, niestandardową funkcję walidacji, użyj Yup, aby sprawdzić, czy adres e-mail i hasło są prawidłowe.

const formik = useFormik({
 Wartości początkowe: {
 e-mail: "",
 hasło: "",
 },
 schemat walidacji: Tak.object().shape({
 email: Tak.string()
 .email("Nieprawidłowy adres e-mail")
 .required("Wymagane"),
 hasło: Tak.string()
 .min (8, "Musi mieć co najmniej 8 znaków")
 .required("Wymagane")
 }),
 onSubmit: (wartości) => {
 console.log("przesłano!");
// obsługuj składanie
 },
});

I to wszystko! Stworzyłeś prosty formularz rejestracyjny za pomocą Formik i Yup.

Zawijanie wszystkiego

Formularze są integralną częścią każdej aplikacji, ponieważ umożliwiają zbieranie informacji o użytkownikach. W React tworzenie formularzy może być bolesnym doświadczeniem, zwłaszcza jeśli masz do czynienia z dużą ilością danych lub wieloma formularzami. Narzędzie takie jak Formik zapewnia łatwy i bezproblemowy sposób pobierania i sprawdzania wartości formularzy.

10 najlepszych praktyk Reaguj, których musisz przestrzegać w 2022 r.

Czytaj dalej

O autorze