So erstellen Sie Formulare in React mit React Hook Form

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.

React Hook Form installieren

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:

npm installiere React-Hook-Form

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

Garn hinzufügen React-Hook-Form

Erstellen eines Formulars mit React Hook Form

Um ein Formular mit React Hook Form zu erstellen, müssen Sie das verwenden useForm Haken. Der useForm Hook gibt Ihnen Zugriff auf Methoden und Eigenschaften, die Sie verwenden werden Erstellen und verwalten Sie Ihre Formulare in Ihrer React-Anwendung.

Hier ist ein Beispiel, das die Verwendung zeigt useForm Haken:

importieren Reagieren aus'reagieren'
importieren { useForm } aus'react-hook-form';
FunktionForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (Daten) =>Konsole.Logdaten);
zurückkehren (



'Text' { ...registrieren("Vorname")} />
Senden</button>
 </form>
 )
}
ExportStandard Form;

Die React Hook Form-Bibliothek verwendet die registrieren Methode zum Registrieren Ihrer Eingabewerte im Hook. Der registrieren Die 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“. handleSubmit Die Methode der React Hook Form-Bibliothek übernimmt die Übermittlung des Formulars.

Um die Formularübermittlung zu verarbeiten, übergeben Sie die Rückruffunktion onSubmit zum handleSubmit Methode. Der onSubmit Die Funktion erhält ein Objekt, das die Werte aller Formulareingaben enthält.

Validieren Sie Eingaben mit der Registermethode

Der registrieren 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 an registrieren Methode.

Etwa so:

importieren Reagieren aus'reagieren'
importieren { useForm } aus'react-hook-form';
FunktionForm() {
const{ register, handleSubmit } = useForm();
const onSubmit = (Daten) =>Konsole.Logdaten);
zurückkehren (



'Text' { ...registrieren("Vorname", { erforderlich: WAHR})} />
'Passwort' { ...registrieren("Passwort", { erforderlich: WAHR, maximale Länge: 10})}/>
Senden</button>
 </form>
 )
}
ExportStandard Form;

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

Der maximale Länge Die Regel legt die maximale Anzahl alphabetischer Buchstaben des Eingabewerts fest. Abgesehen von der erforderlich Und maximale Länge Methoden können Sie weitere Validierungsregeln hinzufügen, z Mindest, max, minimale Länge, Muster, Und bestätigen.

Minimal Maximal

Der Mindest Die Regel gibt den Mindestwert für ein Eingabefeld und den an max Die Regel gibt ihren Maximalwert an.

Du kannst den... benutzen Mindest Und max Regeln mit Zahleneingaben, etwa so:

'Nummer' { ...registrieren("Alter", {Mindest: 18, max: 35}) } />

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

minimale Länge

Der minimale Länge Die Regel ähnelt der maximale Länge Regel, legt aber stattdessen die Mindestanzahl alphabetischer Buchstaben fest:

'Text' { ...registrieren("Name", { minimale Länge: 10 })}/>

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

Muster erstellen und validieren

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

Zum Beispiel:

'Text' { ...registrieren("Vorname", {Muster: **/^[A-Za-z]+$/**}) } />
'Nummer' { ...registrieren("prüfen", {**validieren: (Wert) => Wert <= 12** }) } />

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

Die „Test“-Eingabe verwendet die bestätigen Regel zum Definieren einer benutzerdefinierten Validierungsfunktion, die prüft, ob ihr Wert kleiner oder gleich 12 ist.

Umgang mit Fehlern in Ihrem Formular

Die React Hook Form-Bibliothek bietet einen integrierten Mechanismus für Umgang mit JavaScript-Fehlern in Ihren Formularen. Der handleSubmit Diese 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 von handleSubmit Funktion:

importieren Reagieren aus'reagieren'
importieren { useForm } aus'react-hook-form';
FunktionForm() {
const { registrieren, handleSubmit, formState: { Fehler } } = useForm();
const onSubmit = (Daten) =>Konsole.Logdaten); 
zurückkehren (



'Text' { ...registrieren("Vorname", { erforderlich: WAHR})} />
 {errors.firstname && <Spanne>Bitte geben Sie Ihren Vornamen einSpanne>}
'Nummer' { ...registrieren("Alter", {Mindest: 18, max: 35,}) } />
 {errors.age?.type 'max' && <Spanne> Du bist zu alt für diese SeiteSpanne>}
 {errors.age?.type 'Mindest' && <Spanne> Du bist zu jung für diese SeiteSpanne>}
Senden</button>
 </form>
 )
}
ExportStandard Form;

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

Für die Vorname Eingabefeld, wenn die erforderlich Wenn die Regel nicht erfüllt ist, wird neben dem Eingabefeld die Fehlermeldung „Bitte geben Sie Ihren Vornamen ein“ angezeigt. Wenn der Wert der Alter Wenn 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“.

Jetzt können Sie in React zuverlässige Formulare erstellen

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.