React-Formular-Status mit Formik

Sep 11, 2025

wie man

(Bildkredite: Matt Crouch)

Willkommen in unserem Anleitung zur Verwaltung des Reaktionsformulars mit Formik. Formularelemente halten ihre Werte in ihrem eigenen innerstaatlichen Zustand - in den Chancen mit dem staatlichen Ansatz von React. Um die beiden zusammenarbeiten zu lassen, brauchen wir eine mehr beteiligte Lösung, beispielsweise mit kontrollierten Komponenten für jedes Feld.

Es gibt jedoch viele weitere Aspekte, um ein Formular zu erstellen, als nur Daten erfassen. Wir müssen die Formatierung überprüfen, ist korrekt, alle erforderlichen Felder wurden eingestellt und dass alles erfolgreich gesendet wurde, wenn er gesendet wurde. Das führt zu einer Menge komplizierter Logik, die sich schnell aufbauen kann. Hier kann Formik helfen.

Weitere Ressourcen zur Verbesserung Ihres Webdesigns finden Sie in unserem Ablauf von Webdesign-Tools. und Cloud-Speicherung. Optionen. Von Anfang an anfangen? Wähle das Richtige Webseitenersteller und bekommst deine Web-Hosting Service mit unseren Roundups.

Laden Sie die Quelldateien herunter

Was ist Formik?

Formikum ist eine leichte Bibliothek, die diese Probleme behandelt. Durch das Umwickeln eines Formulars mit den mitgelieferten Komponenten erhalten wir viel von diesem Verhalten kostenlos. Alles, was wir zu liefern müssen, ist der Code, um zu handhaben, was unser Formular eindeutig macht.

Um uns zu helfen, in welchem Formik kann, bauen wir eine kleine Abstimmungsanwendung auf. Der Benutzer kann ihren Namen eingeben und über eine der bereitgestellten Optionen stimmen. Wenn alles in Ordnung ist, wird das Formular eingereicht, aber wenn nicht, empfängt der Benutzer jedoch eine Fehlermeldung.

01. Erste Schritte

Öffnen Sie zum Start das Verzeichnis 'Tutorial' aus den Tutorialialdateien auf der Befehlszeile. Installieren Sie die Abhängigkeiten und starten Sie den Server. Diese App ist auf der Create-React-App erstellt und umfasst seine Pakete sowie Formikus selbst und ein paar andere, um beim Styling zu helfen.

 & gt; npm install.
& gt; NPM Start

Der Entwicklungsserver startet und die Anwendung öffnet sich dann im Browser. Die Datei app.js steuert die gesamte Anwendung, die unsere Containerkomponente für das Formular rendern wird. Aufmachen src / app.js. und importieren Sie das & lt; vartecontainer & gt; Komponente.

 VoteContainer von "./votecontainer";

Fügen Sie es dann in die Anwendung hinzu.

 & lt; Abschnitt classname = "Abstimmungscontainer" & gt;
  & lt; vartecontainer / & gt;
& lt; / szmtag & gt;

02. Formik-Formular erstellen

Formik-Formulare können auf zwei Arten erstellt werden. Das mitFormik. Mit höherer Bestellkomponente können wir eine vorhandene Komponente einwickeln oder das verwenden & lt; formik & gt; Komponente mit einer Render-Propus, die dieselbe Funktion ausführt, was wir verwenden werden.

Erstellen Sie intencontainer.js eine funktionale Komponente, die die gesamte Logik für das Formular enthält. Dies gibt A zurück & lt; formik & gt; Komponente, die unser Formular macht. Geben Sie einen Startwert für die Felder an, die wir später durch die Anfangswerte Stütze.

 Import {formik} von "formik";
Einfuhrabwahl von "./Vote";

Funktion VoteContainer () {{
  Rückkehr & lt; Formik
    InitialValues = {{name: "", Antwort: ""}}
Render = {rectrs = & gt; & lt; Abstimmung {... Requisiten} / & gt;} / & gt;

03. Abstimmungskomponente erstellen

Das & lt; abstimmen & gt; Die Komponente hält die Formstruktur. Durch die Trennen der Formiklogik können wir die Formkomponente so einfach wie möglich halten.

Erstellen Sie eine Abstimmungskomponente in der vote.js, die die Verwendung der & lt; form & gt; Komponente aus Formik. Fügen Sie eine Schaltfläche hinzu, um das Formular als normal einzureichen.

 Import {form} von "formik";
Funktion Abstimmung () {
  Rückkehr (
    & lt; bild classname = "vote" & gt;
      & lt; Eingabetyp = "Senden" Wert = "Jetzt stimmen" / & gt;
    & lt; / form & gt;
  );
}

04. Felder hinzufügen.

FORMIK verfolgt die Änderungen an jedem Feld und liefern sie, sobald das Formular eingereicht wird. Es tut das alles durch die Ereignisse, die aus der Form und jedes Feld darin emittiert wurden.

Auf einem Formularpegel befinden sich zwei spezifische Ereignisse - Senden und Zurücksetzen. Wenn ein Formular übermittelt, benötigen wir Formik, um die Kontrolle zu übernehmen und durchzuführen, wobei das Reset-Ereignis den Status löscht. Die importierten & lt; form & gt; Komponente bindet diese Ereignisse an Formik.

Wir können jetzt anfangen, unser erstes Feld hinzuzufügen. Jede Stimme muss mit einem Namen begleitet werden, was bedeutet, dass wir zuerst einen Texteintrag benötigen.

Das & lt; field & gt; Komponente macht den gleichen Job als & lt; form & gt; tut für die ganze Form. Es bindet die erforderlichen Ereignisse und Requisiten, z. B. einen Namen und einen Wert, um den Feldzustand anzuzeigen.

Fügen Sie ein Feld in das Formular hinzu und verbinden Sie es an ein Etikett. Diese Arbeit, wie sie in regelmäßigen HTML-Formularen würden.

 Import {feld} von "formik";
& lt; label htmlfor = "Name" & gt; Name & lt; / label & gt;
& lt; Feld AutoComplete = "Name" ID = "Name" Name = "Name" Typ = "Text" / & gt;

05. Versorgungslogik.

Wir müssen nicht mit allen Browser-Ereignissen zusammenarbeiten, um sie einzureichen onsubmit. Ereignis wird für uns behandelt. Wir müssen jedoch die Logik angeben, um die Einreichung zu leisten. Der Rückruf wird noch aufgerufen onsubmit. Es empfängt stattdessen die Formularwerte direkt. Es empfängt auch den "Beutel" - ein Objekt, das einige Methoden enthält, um mit dem Formular zu interagieren, während sie einreicht.

Da diese Daten normalerweise auf einen Server gehen würden, kann diese Funktion auch asynchron sein. Formik hat ein besonderes issubmitting. Stütze, dass es automatisch auftrifft, wenn die Einreichung beginnt. Mit einer Async-Funktion können wir warten, bis das Formular eingereicht hat, und das Rücken an FALSE eingestellt hat.

Zurück in votecontainer.js, wir können unsere Einreichungslogik hinzufügen. Erstellen Sie die Funktion und geben Sie sie an die & lt; formik & gt; Komponente. Für dieses Beispiel senden wir nicht an einen Server, aber wir können ein verzögertes Versprechen verwenden, um die Netzwerklatenz zu simulieren.

 const Onsubmit = Async (Werte, Beutel) = & gt; {
    Warten Sie auf neues Versprechen (Resolve = & GT; Settimeout (Resolzen, 1000));
    Bag.Setsubmitting (FALSE);
    console.log ("Formular eingereicht", Werte);
  };
Rückkehr & lt; Formik [...] onsubmit = {Onsubmit} / & gt ;;

06. Zeigen Sie den Status an

Wir müssen auch den eingereichenden Zustand innerhalb des Formulars anzeigen. Um eine doppelte Übermittlung zu verhindern, können wir die Taste deaktivieren, während das Formular einreicht. Formik passiert dies in das Formular in der Form in Abstimmung.js als Prop. Wir können das herausziehen und auf den Knopf anwenden.

 Funktionsabstimmung ({issubmitting}) {[...]}
& lt; Eingang deaktiviert = {isubmitting} type = "Senden" Wert = "Jetzt stimmen" / & gt;

07. Namensfeld hinzufügen

Im Moment kann das Formular ohne einen Namen eingereicht werden. Da dies ein Pflichtfeld ist, sollten wir dies dem Benutzer kennzeichnen.

Der Ursprung & lt; formik & gt; Die Komponente nimmt auch eine Validate-Prop an, die eine Funktion ist, die Validierung durchführt und ein Objekt zurückgibt. Jedes Tastenwertpaar stellt ein Feld und eine Fehlermeldung dar. Wenn ein Feld in diesem Objekt keinen Wert hat, gilt es als gültig. Das Formular wird nur dann einreichen, wenn diese Funktion ein leeres Objekt zurückgibt. Die Funktion empfängt die Formularwerte als Argument. Für ein gewünschtes Feld müssen wir nur überprüfen, ob der Wert keine leere Zeichenfolge ist.

Zurück in votecontainer.js, erstellen Sie eine validate Callback-Funktion, um diesen Wert zu überprüfen und sich auf Formik anklaken.

 const validate = Werte = & gt; {
    const-Fehler = {};
    if (Werte.name === "") {
      Fehler.name = "Name ist erforderlich";
    }
    Rückgaber Fehler;
  };
Rückkehr & lt; Formik [...] validate = {validate} / & gt ;;

08. Anzeigen von Fehlern

Diese Fehler werden dann als Fehler als Fehler angestimmt.js übergeben. Um Fehler inline anzuzeigen, müssen wir die Fehler auf das bestimmte Formularfeld übereinstimmen.

 Funktionsabstimmung ({issubmitting, fehler, berührt}) {[...]}
& lt; div classname = "input-group" & gt;
  & lt; label htmlfor = "Name" & gt; Name & lt; / label & gt;
  & lt; div
    classname = {classnames ({{
      "Validierungsgruppe": TRUE,
      Fehler :! Irrtümer berührt.name.
    })}
  & gt;
    & lt; Feld Autocomplete = "Name" ID = "Name" Name = "Name" Typ = "Text" / & gt;
    {!! ENROR.NAME & AMP; & AMP; berührt.name & amp; & amp; (
      & lt; div classname = "Fehlermeldung" & gt; {fehlerhaft.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik bestätigt das Formular jedes Mal, wenn es aktualisiert wird. Ein Formular mit vielen Feldern würde nach der ersten Änderung sofort mit Fehlern überflutet werden. Um dies zu vermeiden, zeigen wir den Fehler nur an, wenn ein Feld "berührt" wurde, was bedeutet, dass es irgendwann miteinander interagiert wurde. Wenn ein Formular übermittelt, berührt Formik alle Felder und zeigen beliebige ausgeblendete Fehler.

09. Antwortfeld hinzufügen

Mit dem Namen des Namensfelds können wir zu den Antworten ziehen. Der Ansatz, den wir bisher verwendet haben, funktioniert gut für reguläre Texteingänge, eignet sich jedoch nicht für mehrere Eingänge, die unter demselben Feldnamen fallen, z. B. einer Gruppe von Optionsfeldern.

Während wir mehrere einschließen können & lt; field & gt; Bauteile Mit demselben Namen sollten wir nicht so viel wie möglich wiederholen. Stattdessen lässt uns Formik eine benutzerdefinierte Komponente in & lt; field & gt; das kann sie als eins verwalten.

Das & lt; AnsageGroup & GT; Komponente funktioniert ähnlich dem Texteingang. Es dauert eine Optionsstütze, bei der es sich um ein Array handelt, das die anzeigenden Optionen enthält. Diese werden in gestaltete Optionsfelder umgewandelt, mit denen Benutzer eine Antwort wählen können. Fügen Sie dieses Bauteil in Abstimmung.js ein. Durch die Nutzung & lt; field & gt; Es wird die gleichen Requisiten als Namenseingabe sowie beliebige Extras übergeben, in diesem Fall OPTIONEN Konstante.

 Antwortzufuhrgruppe von "./answergroup";
& lt; Feldkomponente = {answergroup} Optionen = {Optionen} Name = "Antwort" / & gt;

Schließlich müssen wir in der VoteContainer.js auch eine Antwort in unserer Validierungsfunktion benötigen. Der Prozess ist das gleiche wie mit dem Namen des Namens.

 if (Werte.anwer === "") {
  Fehler.anser = "Antwort ist erforderlich";

Wenn Sie die Validierungs- und Einreichungslogik trennen und Formik verwenden, um alles zusammen zu nähen, können wir jedes Stück klein und leicht verständlich halten.

Dieser Inhalt erschien ursprünglich in Netzmagazin. . Lesen Sie mehr von unserem Webdesign-Artikel hier .

Weiterlesen:

So testen Sie Reaktionsstellen und Apps
6 große Webdesigntrends für 2020
Meisterminimalismus im Webdesign

React-Formular-Status mit Formik

Was ist Formik?

01. Erste Schritte

02. Formik-Formular erstellen

03. Abstimmungskomponente erstellen

04. Felder hinzufügen.

05. Versorgungslogik.

06. Zeigen Sie den Status an

07. Namensfeld hinzufügen

08. Anzeigen von Fehlern

09. Antwortfeld hinzufügen

wie man - Die beliebtesten Artikel

Wie zeichnet man eine Katze

8 Wesentliche WordPress-Sicherheitsgeheimnisse

Entwerfen Sie eine ansprechende Site mit EM-basierten Größengröße

Power A Blog mit der WordPress-API

Erstellen Sie ein Zeichen mit einer starken Pose in Photoshop

So simulieren Sie Explosionen in Maya

Branding-Profis teilen, wie sie Markenstimme nageln

Erstellen Sie Stilrahmen in Photoshop

Kategorien