Formik ist eine Formularverwaltungsbibliothek, die Komponenten und Hooks bereitstellt, um den Prozess der Erstellung von React-Formularen zu vereinfachen. Formik kümmert sich für Sie um Formularstatus, Validierung und Fehlerbehandlung, was das Sammeln und Speichern von Benutzerdaten erleichtert.
In diesem Tutorial erfahren Sie, wie Sie mit Formik ein Registrierungsformular in React erstellen können. Um mitzumachen, sollten Sie mit der Arbeit mit React-Hooks vertraut sein.
Erstellen Sie eine React-App
Verwenden Sie create-react-app, um Erstellen Sie ein neues React-Projekt:
npx create-react-app formik-form
Navigieren Sie nun zu der formik-form/src Ordner und löschen Sie alle Dateien außer App.js.
Erstellen Sie als Nächstes eine neue Datei und benennen Sie sie Register.js. Hier fügen Sie Ihr Formular hinzu. Denken Sie daran, es zu importieren App.js.
Erstellen Sie ein Reaktionsformular
Sie können React-Formulare entweder mit kontrollierten Komponenten oder mit unkontrollierten Komponenten erstellen. Eine gesteuerte Komponente ist eine Komponente, deren Formulardaten von React selbst verarbeitet werden. Eine unkontrollierte Komponente ist eine Komponente, deren Formulardaten vom DOM verarbeitet werden.
Das offizielle Reagieren Sie auf Dokumente empfehlen die Verwendung kontrollierter Komponenten. Sie ermöglichen es Ihnen, die Formulardaten im lokalen Zustand zu verfolgen und haben daher die volle Kontrolle über das Formular.
Unten sehen Sie ein Beispiel für ein Formular, das mit einer gesteuerten Komponente erstellt wurde.
importiere { useState } aus "reagieren";
const Register = () => {
const [email, setemail] = useState("");
const [Passwort, setpassword] = useState("");
const handleSubmit = (Ereignis) => {
event.preventDefault();
console.log (E-Mail);
};
const handleEmail = (Ereignis) => {
setemail (event.ziel.wert);
};
const handlePassword = (Ereignis) => {
setpassword (event.target.value);
};
Rückkehr (
);
};
Export-Standardregister;
Im obigen Code sind Sie Zustand initialisieren und Erstellen einer Behandlungsfunktion für jedes Eingabefeld. Während dies funktioniert, kann Ihr Code leicht repetitiv und unübersichtlich werden, insbesondere bei vielen Eingabefeldern. Das Hinzufügen von Validierung und Behandlung von Fehlermeldungen ist eine weitere Herausforderung.
Formik zielt darauf ab, diese Probleme zu reduzieren. Es macht es einfach, den Formularstatus zu handhaben, Formulardaten zu validieren und zu übermitteln.
Fügen Sie Formik zu React hinzu
Vor Gebrauch formik, fügen Sie es mit zu Ihrem Projekt hinzu npm.
npm formik installieren
Um Formik zu integrieren, verwenden Sie die Verwenden Sie Formik Haken. In Register.js, importiere useFormik am Anfang der Datei:
importiere { useFormik } aus "formik"
Der erste Schritt besteht darin, die Formularwerte zu initialisieren. In diesem Fall initialisieren Sie die E-Mail und das Passwort.
const formik = useFormik({
Anfangswerte: {
Email: "",
Passwort: "",
},
onSubmit: Werte => {
// Formularübermittlung bearbeiten
},
});
Sie fügen auch die Funktion onSubmit hinzu, die die Formularwerte empfängt und die Formularübermittlung verarbeitet. Für ein Registrierungsformular wie dieses könnte dies bedeuten, einen neuen Benutzer in der Datenbank anzulegen.
Der nächste Schritt ist die Verwendung von formik -Objekt, um die Formularwerte in den Status zu bringen und aus dem Status zu entfernen.
Im obigen Code sind Sie:
- Geben Sie den Eingabefeldern an Ich würde und Name Wert gleich dem, der während der Initialisierung in verwendet wurde Verwenden Sie Formik Haken.
- Zugriff auf den Wert eines Felds unter Verwendung seines Namens, um ihn abzurufen formik.values.
- Bindung formik.handleChange an das onChange-Ereignis, um die Eingabewerte anzuzeigen, während der Benutzer eintippt.
- Verwenden formik.handleBlur besuchte Felder zu verfolgen.
- Bindung formik.handleSubmit zum onSubmit Ereignis zum Auslösen des onSubmit Funktion, die Sie hinzugefügt haben Verwenden Sie Formik Haken.
Aktivieren Sie die Formularvalidierung
Beim Erstellen eines Formulars ist es wichtig, die Benutzereingabe während der Eingabe zu validieren Benutzerauthentifizierung einfach, da Sie Daten nur im richtigen Format speichern. In Ihrem Formular können Sie beispielsweise überprüfen, ob die angegebene E-Mail gültig ist und ob das Passwort mehr als 8 Zeichen hat.
Um das Formular zu validieren, definieren Sie eine Validierungsfunktion, die die Formularwerte akzeptiert und ein Fehlerobjekt zurückgibt.
Wenn Sie die Validierungsfunktion hinzufügen Verwenden Sie Formik, wird jeder gefundene Validierungsfehler in verfügbar sein Formik.Fehler, indiziert auf dem Eingabenamen. Beispielsweise können Sie mit auf einen Fehler im E-Mail-Feld zugreifen Formik.errors.email.
In Register.js, erstellen Sie die bestätigen Funktion und fügen Sie es ein Verwenden Sie Formik.
const formik = useFormik({
Anfangswerte: {
Email: "",
Passwort: "",
},
validieren: () => {
Konstante Fehler = {};
console.log (Fehler)
if (!formik.values.email) {
errors.email = "Erforderlich";
} Sonst wenn (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
) {
errors.email = "Ungültige E-Mail-Adresse";
}
if (!formik.values.passwort) {
errors.password = "Erforderlich";
} Else if (formik.values.password.length < 8) {
errors.password = "Muss mindestens 8 Zeichen lang sein";
}
Rückgabefehler;
},
onSubmit: (Werte) => {
console.log("übermittelt!");
// Übermittlung bearbeiten
},
});
Fehlerbehandlung hinzufügen
Zeigen Sie als Nächstes die Fehlermeldungen an, sofern vorhanden. Benutzen Formik.berührt um zu überprüfen, ob das Feld besucht wurde. Dadurch wird verhindert, dass ein Fehler für ein Feld angezeigt wird, das der Benutzer noch nicht besucht hat.
Validieren Sie Daten mit Yup
Formik bietet eine einfachere Möglichkeit zur Validierung von Formularen mithilfe von Jep Bücherei. Installieren Sie yup, um loszulegen.
npm installieren ja
Importieren Jep in Register.js.
import * als Yup von "yup"
Anstatt Ihre eigene benutzerdefinierte Validierungsfunktion zu schreiben, verwenden Sie Yup, um zu prüfen, ob die E-Mail-Adresse und das Passwort gültig sind.
const formik = useFormik({
Anfangswerte: {
Email: "",
Passwort: "",
},
Validierungsschema: Yup.object().shape({
E-Mail: Yup.string()
.email("Ungültige E-Mail-Adresse")
.required("Erforderlich"),
Passwort: Yup.string()
.min (8, „Muss 8 Zeichen oder mehr sein“)
.required("Erforderlich")
}),
onSubmit: (Werte) => {
console.log("übermittelt!");
// Übermittlung bearbeiten
},
});
Und das ist es! Sie haben mit Formik und Yup ein einfaches Registrierungsformular erstellt.
Alles einpacken
Formulare sind ein wesentlicher Bestandteil jeder Anwendung, da sie es Ihnen ermöglichen, Benutzerinformationen zu sammeln. In React kann das Erstellen von Formularen eine schmerzhafte Erfahrung sein, besonders wenn Sie mit vielen Daten oder mehreren Formularen zu tun haben. Ein Tool wie Formik bietet eine einfache und nahtlose Möglichkeit, Formularwerte abzurufen und zu validieren.
10 Best Practices für Reagieren, die Sie im Jahr 2022 befolgen müssen
Lesen Sie weiter
Verwandte Themen
- Programmierung
- Programmierung
- JavaScript
- Reagieren
Über den Autor
Mary Gathoni ist eine Softwareentwicklerin mit einer Leidenschaft für die Erstellung technischer Inhalte, die nicht nur informativ, sondern auch ansprechend sind. Wenn sie nicht gerade programmiert oder schreibt, trifft sie sich gerne mit Freunden und ist draußen.
Abonnieren Sie unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich anzumelden