Zarządzaj stanem reakcji stanu z Formikem

Sep 15, 2025

Jak

(Kredyt obrazu: Matt Crouch)

Witamy w naszym przewodniku, w jaki sposób zarządzać stanem formularza reakcji z Formikem. Elementy formularzy posiadają swoje wartości we własnym stanie wewnętrznym - na kursy z podejściem kierowanym przez państwo Reaction. Aby tworzyć dwie prace razem, potrzebujemy bardziej zaangażowanego rozwiązania, takiego jak przy użyciu sterowanych komponentów dla każdego pola.

Ale jest wiele innych aspektów do tworzenia formularza niż tylko przechwytywania danych. Musimy sprawdzić, że formatowanie jest poprawne, wszystkie wymagane pola zostały ustawione i że wszystko zostało wysłane pomyślnie po przesłaniu. Prowadzi do wielu skomplikowanej logiki, która może szybko się zbudować. Właśnie tam pomaga Formik.

Aby uzyskać więcej zasobów, aby ulepszyć projektowanie stron internetowych, sprawdź nasze podsumowanie Narzędzia do projektowania stron internetowych. i magazyn w chmurze Opcje. Zaczynając od podstaw? Wybierz dobrze Kreator strony internetowej i zdobądź hosting Obsługa prawa z naszymi rundami.

Pobierz pliki źródłowe

Co to jest formik?

Formik jest lekką biblioteką, która obsługuje te problemy. Okładając formularz z dostarczonymi komponentami, dostajemy wiele tego zachowania za darmo. Wszystko, co musimy dostarczyć, jest kod do obsługi, co sprawia, że nasza forma jest wyjątkowa.

Aby pomóc nam zbadać, co może zrobić Formik, będziemy budować małą aplikację do głosowania. Użytkownik może wprowadzić ich nazwę i głosować na jednej z dostarczonych opcji. Jeśli wszystko jest w porządku, formularz zostanie przesłany, ale jeśli nie, użytkownik odbiera komunikat o błędzie.

01. Zacznij

Aby uruchomić, otwórz katalog "Tutorial" z plików samouczka w wierszu poleceń. Zainstaluj zależności i uruchom serwer. Ta aplikacja jest zbudowana na twoją aplikację i obejmuje jego pakiety, wraz z samym formikiem i kilkoma innymi, aby pomóc w stylizacji.

 & gt; NPM Install.
& gt; NPM Start

Serwer rozwoju rozpocznie się, a aplikacja otwiera się następnie w przeglądarce. Plik app.js steruje całą aplikacją, która spowoduje nasz składnik kontenera dla formularza. Otworzyć src / app.js. i importuj & lt; votecontainer & gt; składnik.

 Importuj VotContainer z "./votecontainer";

Następnie dodaj go do aplikacji.

 ° C EkscynameName = "Vote-Container" & GT;
  & lt; Votecontainer / & GT;
& lt; / sekcja

02. Utwórz formularz Formika

Formularze Formik można utworzyć na dwa sposoby. The. withformik. Komponent wyższego rzędu umożliwia nam opakowanie istniejącego składnika lub używania & lt; Formik & GT; Komponent z renderowaniem, który wykonuje tę samą funkcję, co będziemy korzystać.

Wewnątrz VotContainer.js należy utworzyć element funkcjonalny, który będzie przechowywać całą logikę formularza. To zwraca A. & lt; Formik & GT; komponent, który sprawia, że nasz formularz. Podaj wartość wyjściową dla pól, którą dodamy później Wartości początkowe rekwizyt.

 Importuj {Formik} z "Formika";
Importuj głos "./vote";

funkcja VotContainer () {
  Powrót & LT; Formik
    InitedValues = {{Nazwa: "", Odpowiedź: "}}
render = {rekwizyty = & gt; & LT; głosowanie {... rekwizyty} / & gt;} / & gt;

03. Utwórz komponent głosowy

The. & lt; głosuje & gt; Komponent posiada strukturę formularza. Mając oddzielną logikę Formika, możemy zachować komponent formularza tak prosty, jak to możliwe.

Utwórz składnik głosowy w Vote.js, który korzysta z & lt; Form & GT; składnik z formika. Dodaj przycisk, aby przesłać formularz jako normalny.

 Importuj {Form} z "Formika";
Funkcja głosowania () {
  powrót (
    & LT; Forma ClassName = "Głosuj" & GT;
      & LT; Typ wejścia = "Prześlij" Value = "Głosuj teraz" / & GT;
    & LT; / Form & GT;
  );
}

04. Dodaj pola

Formik śledzi zmiany w każdej dziedzinie i dostarczy je po złożeniu formularza. Robi to wszystko przez wydarzenia emitowane z formularza i każdego pola w niej.

Na poziomie formularza znajdują się dwa konkretne wydarzenia - przesyłać i zresetować. Gdy składa się formularz, potrzebujemy formika do przejęcia i wykonania kontroli, a zdarzenie resetowania wyczyszczenie stanu. Importowany & lt; Form & GT; Komponent wiąże te zdarzenia do formika.

Możemy teraz zacząć dodawać nasze pierwsze pole. Każdy głos musi towarzyszyć imię, co oznacza, że najpierw potrzebujemy wprowadzania tekstu.

The. & lt; field & gt; Komponent wykonuje tę samą pracę jak & lt; Form & GT; robi dla całej formy. Wiązuje niezbędne zdarzenia i rekwizyty, takie jak nazwa i wartość w celu wyświetlenia stanu polowego.

Dodaj pole do formularza i podłącz go do etykiety. Pracują te, jak w regularnych formach HTML.

 Importuj {field} z "Formika";
& LT; Label HTMLFOR = "Nazwa" & GT; Nazwa & LT; / Label & GT;
& LT; Field AutoDoComplete = "Nazwa" ID = "Nazwa" Nazwa = "Nazwa" Type = "Tekst" / & GT;

05. Logika zasilania

Nie musimy pracować z żadnymi wydarzeniami przeglądarki, aby przesłać, jako Onsubmit. Wydarzenie jest dla nas obsługiwane. Ale musimy dostarczyć logikę do przesyłania. Callback jest nadal wywoływany Onsubmit. Ale zamiast tego otrzymuje bezpośrednio wartości formularza. Otrzymuje również "torbę" - obiekt zawierający kilka metod w interakcji z formularzem, podczas gdy się składa.

Ponieważ dane te zazwyczaj udostępniałyby do serwera, funkcja ta może być również asynchroniczna. Formik ma wyjątkowy issubmitting. Uprawnienie, że ustawia się automatycznie, gdy rozpocznie się zgłoszenie. Dzięki funkcji asynchronicznej możemy poczekać, aż formularz został przesłany i ustawiony z powrotem na false.

Wróć do VotContainer.js, możemy dodać naszą logikę zgłoszenia. Utwórz funkcję i przejdź do & lt; Formik & GT; składnik. W tym przykładzie nie będziemy wysyłać do serwera, ale możemy użyć opóźnionej obietnicy, aby symulować opóźnienie sieciowe.

 Const OnSubmit = async (wartości, torba) = & gt; {
    Poczekaj na nową obietnicę (rozstrzygnąć = & gt; Settimeout (postanowienie, 1000));
    torba.Setubmitting (false);
    Console.log ("Składany formularz", wartości);
  };
Powrót & LT; Formik [...] OnSubmit = {onsubmit} / & gt;

06. Stan wyświetlania.

Musimy również wyświetlać, że składanie stanu w formularzu. Aby zapobiec podwójnym zgłoszeniu, możemy wyłączyć przycisk podczas przesyłania formularza. Formik przekazuje to w formularzu wewnątrz głosowania.js jako prop. Możemy to wyciągać i zastosować go do przycisku.

 Głosowanie funkcji ({istubmitting}) {[...]}
& LT; Input Disabled = {ISSUBLICTITTS} Type = "Prześlij" Value = "Głosuj teraz" / & GT;

07. Dodaj pole Nazwa

W tej chwili formularz można przesłać bez wprowadzenia nazwy. Ponieważ jest to wymagane pole, powinniśmy oznaczyć to użytkownikowi.

Korzeń & lt; Formik & GT; Komponent podejmuje również walidentyfikator Prop, który jest funkcją, która wykonuje walidację i zwraca obiekt. Każda para wartości kluczowej reprezentuje pole i komunikat o błędzie. Jeśli w tym obiekcie nie ma żadnej wartości, uznaje się, że jest ważny. Forma przesyła tylko wtedy, gdy ta funkcja zwróci pusty obiekt. Funkcja otrzymuje wartości formularza jako argument. W przypadku wymaganego pola musimy tylko sprawdzić wartość, nie jest pustym ciągiem.

Wróć do VotContainer.js, utwórz funkcję walidowania wywołania zwrotnego, aby sprawdzić tę wartość i podłączyć go do formika.

 Const Sprawdź poprawność = wartości = & gt; {
    Const Brinds = {};
    Jeśli (wartości.name === "") {
      errors.name = "Nazwa jest wymagana";
    }
    zwrócić błędy;
  };
Powrót & LT; Formik [...] Walidate = {Walidate} / & GT;

08. Wyświetl błędy

Błędy te są następnie przekazywane do głosowania.js jako błędów. Aby wyświetlić błędy inline, musimy dopasować błędy do określonego pola formularza.

 Głosowanie funkcji ({ISSUBLICTICTICTICTS, Brors, Dotknął}) {[...]}
& lt; div className = "Grupa wejściowa" & GT;
  & LT; Label HTMLFOR = "Nazwa" & GT; Nazwa & LT; / Label & GT;
  & lt; div
    classname = {classnames ({
      "Walidacja-Group": True,
      Błąd: !! Enrors.Name & amp; & amp; dotknięty.name.
    })}
  & gt;
    & LT; Field AutoComplete = "Nazwa" ID = "Nazwa" Nazwa = "Nazwa" Type = "Tekst" / & GT;
    {!! Nazwa i wzmacniacz; & Amp; dotknięty.name & amp; & amp; (
      & lt; div className = "komunikat o błędzie" & gt; {{}} & lt; / Div & GT;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik potwierdzi formularz za każdym razem, gdy aktualizuje się. Forma z dużą ilością pól niezwłocznie nasiano błędami po pierwszej zmianie. Aby tego uniknąć, wyświetlamy błąd tylko wtedy, gdy pole został "dotykany", co oznacza, że został w pewnym momencie interakcji. Gdy podnosi formularz, Formik dotknie wszystkich pól i pokazać ukryte błędy.

09. Dodaj pole odpowiedzi

Z kompletnym polem Nazwa możemy przenieść się do odpowiedzi. Podejście, które do tej pory wykorzystaliśmy, działa dobrze dla regularnych wejść tekstowych, ale nie nadaje się do wielu wejść, które spadają pod tym samym nazwą pola, taką jak grupa przycisków radiowych.

Chociaż możemy dołączyć wiele & lt; field & gt; Komponenty o tej samej nazwie, powinniśmy unikać powtarzania siebie jak najwięcej. Zamiast tego Formik pozwala nam przekazać niestandardowy składnik do & LT; Field & GT; to może zarządzać nimi jako jeden.

The. & lt; Answergroup & GT; Komponent działa podobnie do wejścia tekstowego. Wymaga opcji Prop, który jest tablicą zawierającą opcje do wyświetlenia. Są one przekształcane w stylizowane przyciski radiowe, które pozwalają użytkownikom wybrać odpowiedź. Dołącz ten komponent w głosowaniu.js Używając & lt; field & gt; Zostaje przekazany te same rekwizyty, co wejście nazwiska, a także wszelkie dodatki, w tym przypadku Opcje stały.

 Importuj grupom odpowiedzi z "./answergroup";
& lt; field Component = {Answergroup} Opcje = {Opcje} Nazwa = "Odpowiedź" / & GT;

Wreszcie musimy wymagać odpowiedzi w naszej funkcji walidacyjnej w VotContainer.js. Proces jest taki sam jak w polu Nazwa.

 IF (wartości.answer === "") {
  błędów.ANSWER = "Odpowiedź jest wymagana";

Utrzymując walidację i logikę zgłoszenia odrębną i przy użyciu formika do zeszycia wszystkiego razem, jesteśmy w stanie zachować każdy kawałek mały i łatwy do zrozumienia.

Ta treść pierwotnie pojawiła się magazyn netto. . Przeczytaj więcej Artykuły do projektowania stron internetowych .

Czytaj więcej:

Jak testować witryny i aplikacje
6 Ogromnych trendów projektowania stron internetowych na 2020 roku
Master minimalizm w projekcie internetowym

Zarządzaj stanem reakcji stanu z Formikem

Co to jest formik?

01. Zacznij

02. Utwórz formularz Formika

03. Utwórz komponent głosowy

04. Dodaj pola

05. Logika zasilania

06. Stan wyświetlania.

07. Dodaj pole Nazwa

08. Wyświetl błędy

09. Dodaj pole odpowiedzi

Jak - Najpopularniejsze artykuły

Master pędzel miksera w Photoshopie

Zbuduj animowany podzielony na ekranie Page

Wykonaj interaktywne efekty typografii 3D

6 sposobów przyspieszenia modelowania

Jak wyrzucić przekonujące oczy w Zbrush

Pan młody nieodparcie futrzanego stworzenia

Jak zaprojektować przyjazne dla użytkownika interfejsy mobilne

Provider PRO do tworzenia tekstur 3D

Kategorie