Verwenden von Formik, um Formulare in React zu verarbeiten

Webformulare sind für Websites und Anwendungen unerlässlich. Während native HTML -Formulare grundlegende Funktionen bieten, kann es komplex werden, ihren Zustand, ihre Validierung und die Einreichung zu verwalten. React mit seinem komponentengetriebenen Ansatz vereinfacht die Form des Formulars, kann jedoch zu einem ausführlichen Code führen. Formik, eine leichte Bibliothek, befasst sich elegant mit diesen Herausforderungen und vereinfacht das Staatsmanagement, die Validierung und die Einreichung.

Dieser Artikel zeigt, dass ein React -Formular mit Formik erstellt wird und seine Fähigkeiten für den Umgang mit Zustand, Validierung und Einreichung zeigt. Wir beginnen mit einer grundlegenden React -Komponente und integrieren dann Formik.

Aufbau eines kontrollierten React -Formulars

React -Komponenten verlassen sich auf Zustand und Requisiten. HTML -Formelemente behalten den internen Zustand durch ihr value bei. Dies macht sie unkontrollierte Komponenten - das DOM verwaltet den Staat. Controllierte Komponenten, in denen React den Zustand verwaltet, bieten jedoch eine bessere Kontrolle und eine einzige Quelle der Wahrheit.

Eine einfache unkontrollierte HTML -Form könnte so aussehen:

<div class="formRow">
  <label for="email">E-Mail-Adresse</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">Passwort</label>
  <input type="password" id="password">
</div>
<button type="submit">Einreichen</button>

Umwandlung in einer kontrollierten React -Komponente:

 Funktion htmlform () {
  const [E -Mail, setemail] = react.ussestate ("");
  const [password, setPassword] = react.usestate ("");

  zurückkehren (
    

E-Mail-Adresse setemail (e.target.Value)} />

Passwort setPassword (e.target.Value)} />

Einreichen

); }

Dieser Ansatz bietet eine einzige Quelle der Wahrheit für Formwerte und ermöglicht eine einfachere Validierung und Leistungsoptimierung.

Warum Formik wählen?

Für React (z. B. React Hook Form, Redux Form) existieren zahlreiche Formmanagementbibliotheken. Formik unterscheidet sich durch:

1. Deklarativer Ansatz: Abstraktion vereinfacht den Zustand, die Validierung und die Einreichung.
2. Escape Hatch: Bietet bei Bedarf trotz seiner Abstraktion.
3. Co-Located-Status: Hält die formbezogene Logik innerhalb der Komponente.
4. Anpassungsfähigkeit: Ermöglicht die Verwendung von so viel oder so wenig Formik wie erforderlich.
5. Benutzerfreundlichkeit: Einfach und effektiv.

Lassen Sie uns Formik in unsere Formkomponente integrieren.

Implementierung von Formik

Wir erstellen ein grundlegendes Anmeldeformular und untersuchen drei Methoden der Nutzung von Formik:

1. useFormik -Haken
2. Formik mit React -Kontext (<formik></formik> )
3. withFormik -Komponente höherer Ordnung

Eine Demo erfordert Formik- und Yup -Pakete.

Methode 1: useFormik -Haken

Unsere aktuelle Form ist nicht funktionsfähig. Der useFormik -Hook bietet Formik -Funktionen und Variablen. Das Protokollieren des zurückgegebenen Werts zeigt seinen Inhalt.

Wir werden useFormik mit initialValues ​​und einem onSubmit -Handler verwenden:

 // Komponente reagieren
Funktion baseformik () {
  const formik = useFormik ({{
    InitialValues: {E -Mail: "", Passwort: ""},
    OnSubmit (Werte) {
      // Einreichungslogik Formulierung
    }
  });

  zurückkehren (
    

{/ * Formelemente */}

); }

Bindungsformik zur Bildung von Elementen:

 // Komponente reagieren
Funktion baseformik () {
  const formik = useFormik ({{
    InitialValues: {E -Mail: "", Passwort: ""},
    OnSubmit (Werte) {
      // Einreichungslogik Formulierung
    }
  });

  zurückkehren (
    

E-Mail-Adresse

{/ * ... andere Formelemente */}

); }

Diese Übermittlung ( onSubmit={formik.handleSubmit} ) und Eingabestatus ( value , onChange über formik.getFieldProps ). Wir vermeiden das manuelle Staatsmanagement und die Event -Handhabung. Destructuring getFieldProps und handleSubmit verbessert die Code -Klarheit weiter.

Der<formik></formik> Die Komponente bietet eine weitere Abstraktion mit integrierten Komponenten wie<field></field> Anwesend<form></form> , Und<errormessage></errormessage> . Diese Komponenten verwenden das Muster der Render -Requisiten.

 Import {Formik, Feld, Form} aus 'Formik';

Funktion formikrenderProps () {
  const initialValues ​​= {E -Mail: "", Passwort: ""};

  const onSubmit = (values) => {
    Alert (json.Stringify (Werte, Null, 2));
  };

  zurückkehren (
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {() => (
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ... andere Formelemente */}
        </form>
      )}
    </formik>
  );
}

Formik behandelt den Zustand und die Unterwerfung; Wir konzentrieren uns auf die Formstruktur.

Formularvalidierung mit Formik

Formik bietet eine Validierung auf Formularebene (unter Verwendung von validate oder validationSchema ), Feldebene oder mit manuellen Auslösern. Die Validierung auf Formularebene validiert das gesamte Formular gleichzeitig. validate dient zur benutzerdefinierten Validierung, während validationSchema eine Bibliothek wie Yup verwendet.

Beispiel mit validieren: validate :

 const formik = useFormik ({{
  // ...
  validieren: () => {
    const errors = {};
    if (! Formik. }
    // ... andere Validierungen
    Rückgabefehler;
  },
  // ...
});

Beispiel unter Verwendung von validationSchema mit YUP:

 const formik = useFormik ({{
  // ...
  ValidationSchema: yup.object (). Form ({{{{{
    E -Mail: yup.string (). E -Mail ("Ungültige E -Mail"). Erforderlich ("erforderlich"),
    // ... andere Validierungen
  }),
  // ...
});

Feldebene und manuelle Validierung sind ebenfalls möglich.

Methode 3: Komponente withFormik höherer Ordnung

withFormik ist eine Komponente höherer Ordnung, die Ihre Form-Komponente umhüllt.

Praktische Beispiele

Veranschaulichen Sie das Anzeigen von Fehlermeldungen und das Generieren eines Benutzernamens.

Fehlermeldungen anzeigen

Formik vereinfacht die Fehleranzeige. Überprüfen Sie das errors und zeigen Sie Nachrichten an:

<label htmlfor="email">
  E-Mail-Adresse
  {Formik.touched.email && Formik.Erors.email}
</label>

Oder verwenden<errormessage></errormessage> :

<errormessage name="email"></errormessage>

Einen Benutzernamen generieren

setValues ​​von Formik können verwendet werden, um einen Benutzernamen aus der E -Mail zu generieren:

 OnSubmit (Werte) {
  Formik.SetValues ​​({... Werte, Benutzername: `$ $ {values.email.split ("@") [0]}`});
}

Abschluss

Formik vereinfacht die React Form -Handhabung erheblich. Dieser Artikel behandelt die Grundlagen; Entdecken Sie die Dokumentation von Formik für fortschrittliche Funktionen und Anwendungsfälle.

Das obige ist der detaillierte Inhalt vonVerwenden von Formik, um Formulare in React zu verarbeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!