Blog

May 09, 2023

So erstellen Sie Formulare in React mit React Hook Form

Lassen Sie Ihre React-Formulare mit geringstem Aufwand erstellen und validieren. Gebäude

Lassen Sie Ihre React-Formulare mit geringstem Aufwand erstellen und validieren.

Das Erstellen von Formularen in einer React-Anwendung kann komplex und zeitaufwändig sein. Mit Hilfe der React Hook Form-Bibliothek können Sie Ihrer React-Anwendung ganz einfach leistungsstarke Formulare hinzufügen.

React Hook Form ist eine Bibliothek zum Erstellen von Formularen in React, die den Prozess der Erstellung komplexer und wiederverwendbarer Formulare vereinfacht. Wenn Sie eine React-App erstellen möchten, sollten Sie lernen, wie Sie mithilfe der React Hook Form-Bibliothek Formulare in React erstellen.

Um React Hook Form verwenden zu können, müssen Sie es mit den Paketmanagern npm oder Yarn installieren.

Um React Hook Form mit npm zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

Führen Sie den folgenden Befehl aus, um React Hook Form mit Garn zu installieren:

Um ein Formular mit React Hook Form zu erstellen, müssen Sie das verwendenuseForm Haken. DeruseFormMit Hook erhalten Sie Zugriff auf Methoden und Eigenschaften, die Sie zum Erstellen und Verwalten Ihrer Formulare in Ihrer React-Anwendung verwenden.

Hier ist ein Beispiel, das die Verwendung zeigtuseFormHaken:

Die React Hook Form-Bibliothek verwendet dieregistrieren Methode zum Registrieren Ihrer Eingabewerte im Hook. DerregistrierenDie Methode verbindet die Eingabefelder eines Formulars mit der React Hook Form-Bibliothek, sodass die Bibliothek die Eingabefelder verfolgen und validieren kann.

Im obigen Codeblock registrieren Sie eine Eingabe mit dem Namen „Vorname“. DerhandleSubmitDie Methode der React Hook Form-Bibliothek übernimmt die Übermittlung des Formulars.

Um die Formularübermittlung zu verarbeiten, übergeben Sie die RückruffunktiononSubmitzumhandleSubmit Methode. DeronSubmitDie Funktion erhält ein Objekt, das die Werte aller Formulareingaben enthält.

Derregistrieren Mit der Methode können Sie Validierungsregeln für Ihre Eingabefelder einrichten. Um Ihren Eingabefeldern eine Validierung hinzuzufügen, übergeben Sie ein Objekt mit Validierungsregeln als zweites Argument anregistrierenMethode.

Etwa so:

In diesem Beispiel fügen Sie dem Eingabefeld „Vorname“ eine Validierungsregel und dem „Passwort“ zwei Validierungsregeln hinzu. DererforderlichDie Regel gibt an, dass der Benutzer die Eingabefelder ausfüllen muss und das Formular nicht senden kann, wenn die Felder leer sind.

Dermaximale Länge Die Regel legt die maximale Anzahl alphabetischer Buchstaben des Eingabewerts fest. Abgesehen von dererforderlichUndmaximale LängeMethoden können Sie weitere Validierungsregeln hinzufügen, zMindest,max,minimale Länge,Muster, Undbestätigen.

DerMindestDie Regel gibt den Mindestwert für ein Eingabefeld und den anmaxDie Regel gibt ihren Maximalwert an.

Du kannst den ... benutzenMindestUndmaxRegeln mit Zahleneingaben, etwa so:

Der Wert des Eingabefelds oben muss mindestens 18 und darf nicht mehr als 35 betragen.

Derminimale LängeDie Regel ähnelt dermaximale LängeRegel, legt aber stattdessen die Mindestanzahl alphabetischer Buchstaben fest:

In diesem Beispiel gibt die minLength-Regel an, dass der Eingabewert mindestens 10 Zeichen lang sein sollte.

DerMuster Die Regel gibt ein reguläres Ausdrucksmuster an, mit dem der Eingabewert übereinstimmen muss. Derbestätigen Mit der Regel können Sie eine benutzerdefinierte Validierungsfunktion definieren, um den Eingabewert zu validieren. Die Funktion sollte entweder zurückkehrenWAHRoder eine String-Fehlermeldung.

Zum Beispiel:

In diesem Beispiel verwendet die Eingabe „Vorname“ dieMuster Regel. DerMustererfordert, dass der Eingabewert nur alphabetische Zeichen (Groß- und Kleinbuchstaben) enthält.

Die Eingabe „test“ verwendet diebestätigenRegel zum Definieren einer benutzerdefinierten Validierungsfunktion, die prüft, ob ihr Wert kleiner oder gleich 12 ist.

Die React Hook Form-Bibliothek bietet einen integrierten Mechanismus zur Behandlung von JavaScript-Fehlern in Ihren Formularen. DerhandleSubmitDiese Funktion wird aufgerufen, wenn der Benutzer das Formular abschickt. Sie gibt ein Versprechen zurück, das bei erfolgreicher Validierung mit den Formulardaten aufgelöst wird.

Wenn jedoch Validierungsfehler auftreten, wird das Versprechen mit einem Fehlerobjekt abgelehnt, das die Validierungsfehler enthält.

Hier ist ein Beispiel für den Umgang mit Fehlern mithilfe vonhandleSubmitFunktion:

In diesem Codeblock ist dieformState Das Objekt erhält Zugriff auf die Fehler jedes Felds. DerFehler Das Objekt speichert die Validierungsfehler für jedes Eingabefeld. DerFehlerDas Objekt gibt bedingt eine Fehlermeldung für jedes ungültige Feld aus.

Für dieVornameEingabefeld, wenn dieerforderlich Wenn die Regel nicht erfüllt ist, wird neben dem Eingabefeld die Fehlermeldung „Bitte geben Sie Ihren Vornamen ein“ angezeigt. Wenn der Wert derAlterWenn das Eingabefeld außerhalb des zulässigen Bereichs liegt, wird eine Fehlermeldung angezeigt.

Wenn der Wert kleiner als 18 ist, lautet die Fehlermeldung „Sie sind zu jung für diese Website“, und wenn der Wert größer als 35 ist, lautet die Fehlermeldung „Sie sind zu alt für diese Website“.

Das Erstellen von Formularen in React kann ein komplexer und zeitaufwändiger Prozess sein. Dennoch vereinfacht React Hook Form diese Aufgabe, indem es eine benutzerfreundliche und flexible Bibliothek für die Verwaltung von Formulardaten und die Validierung bereitstellt.

Mit Hilfe des useForm-Hooks, der Register-Methode und der handleSubmit-Methode wird das Erstellen von Formularen in React zu einem effizienteren und optimierten Prozess. Sie können funktionale Formulare erstellen und so das Benutzererlebnis und die Gesamtqualität Ihrer React-Anwendungen verbessern.

Noble Okafor ist ein erfahrener Softwareentwickler mit über dreijähriger Erfahrung im Programmierbereich. Seine Leidenschaft gilt der Entwicklung optimierter JavaScript-, nativer und plattformübergreifender Mobil- und Web-Softwarelösungen. Er ist bestrebt, sein Wissen und seine Lektionen durch seine Fachartikel zu dokumentieren und verfügt über mehr als ein Jahr Erfahrung im Schreiben. Der Hauptschwerpunkt und das Ziel dieser Artikel besteht darin, die Komplexität rund um Software-Engineering-Themen zu vereinfachen.