Erstellen von Formularen in React mit der React-Hook-Form-Bibliothek

In diesem Artikel werden wir die React-Hook-Form-Bibliothek untersuchen.

Sie lernen, wie Sie diese Bibliothek verwenden und in React integrieren. Wir werden auch sehen, warum es zu einer beliebten Wahl für die Erstellung einfacher und komplexer Formulare mit zusätzlicher Unterstützung für die Bearbeitung komplexer Validierungen wird.

Lass uns anfangen

Das Arbeiten mit Formularen in React ist eine komplexe Aufgabe. Und es wird nur komplexer, wenn die Anzahl der Eingabefelder mit den Validierungen zunimmt.

Schauen Sie sich den folgenden Code an:

 import React, { useState } from "react"; import "./styles.css"; export default function App() { const [state, setState] = useState({ email: "", password: "" }); const handleInputChange = (event) => { setState((prevProps) => ({ ...prevProps, [event.target.name]: event.target.value })); }; const handleSubmit = (event) => { event.preventDefault(); console.log(state); }; return ( Email Password Login ); }

Hier ist eine Code Sandbox-Demo: //codesandbox.io/s/login-form-zjxs9.

Im obigen Code haben wir nur 2 Eingabefelder, nämlich emailund passwordund eine Senden-Schaltfläche.

Jedem Eingabefeld wurden ein valueund ein onChangeHandler hinzugefügt, damit wir den Status basierend auf den Benutzereingaben aktualisieren können.

Außerdem haben wir eine handleSubmitMethode hinzugefügt , mit der die im Formular eingegebenen Daten auf der Konsole angezeigt werden.

Das sieht gut aus. Was aber, wenn wir Validierungen wie erforderliche Feldvalidierung, Validierung der Mindestlänge, Passwortvalidierung, E-Mail-Feldvalidierung hinzufügen und auch die entsprechenden Fehlermeldungen anzeigen müssen?

Der Code wird komplexer und langwieriger, wenn die Anzahl der Eingabefelder und ihre Validierungen zunehmen.

Dies ist eine sehr häufige Anforderung in jeder Anwendung. Also einfach die Arbeit mit Forms gibt es verschiedene Bibliotheken zur Verfügung , wie Formik, redux-form, react-final-form, react-hook-formund so weiter.

Aber diejenige, die immer beliebter wird, ist die react-hook-formBibliothek.

Lassen Sie uns nun lernen, warum und wie man es benutzt. Dafür erstellen wir eine neue React-Anwendung.

Erstellen Sie ein neues React-Projekt, indem Sie den folgenden Befehl vom Terminal aus ausführen:

npx create-react-app react-hook-form-demo

Sobald das Projekt erstellt wird, löschen Sie alle Dateien aus dem srcOrdner und erstellen Sie neue index.jsund styles.cssDateien im srcOrdner.

Führen Sie den folgenden Befehl vom Terminal aus, um die Formularbibliothek zu installieren:

yarn add react-hook-form

So erstellen Sie erste Seiten

Öffnen Sie die src/index.jsDatei und fügen Sie den folgenden Inhalt hinzu:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root'));

Öffnen Sie die src/styles.cssDatei und fügen Sie den Inhalt von hier hinzu.

Erstellen Sie nun eine neue Datei App.jsim srcOrdner mit folgendem Inhalt:

 import React from "react"; import "./styles.css"; export default function App() { return ( Email Password Login ); }

Hier haben wir gerade die E-Mail- und Passwortfelder zum Formular hinzugefügt.

Grundlegende Formularerstellung mit React-Hook-Form

Die react-hook-formBibliothek bietet einen useFormHook, mit dem wir mit Formularen arbeiten können.

Importieren Sie den useFormHaken wie folgt:

import { useForm } from 'react-hook-form';

Verwenden Sie den useFormHaken wie folgt:

const { register, handleSubmit, errors } = useForm();

Hier,

  • register ist eine Funktion, die als Referenz verwendet wird, die vom useFormHook bereitgestellt wird . Wir können es jedem Eingabefeld zuweisen, damit react-hook-formdie Änderungen für den Eingabefeldwert verfolgt werden können.
  • handleSubmit ist die Funktion, die wir beim Senden des Formulars aufrufen können
  • Fehler enthalten gegebenenfalls die Validierungsfehler

Ersetzen Sie nun den Inhalt der App.jsDatei durch den folgenden Inhalt:

 import React from "react"; import { useForm } from "react-hook-form"; import "./styles.css"; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email Password Login ); }

Im obigen Code haben wir jedem Eingabefeld, das wir vom useFormHook erhalten haben, einen Verweis gegeben .

ref={register}

Außerdem haben wir die Funktion onSubmit hinzugefügt, die an die Funktion handleSubmit übergeben wird.

Beachten Sie, dass wir für jedes Eingabefeld einen eindeutigen Namen angegeben haben, der obligatorisch ist, damit react-hook-formdie sich ändernden Daten verfolgt werden können.

Wenn wir das Formular senden, übernimmt die handleSubmit-Funktion die Formularübermittlung. Der Benutzer hat die eingegebenen Daten an die Funktion onSubmit gesendet, die wir an der Konsole protokollieren.

const onSubmit = (data) => { console.log(data); };

Starten Sie nun die Anwendung, indem Sie den yarn startBefehl ausführen.

Wie Sie sehen, werden beim Absenden des Formulars die vom Benutzer eingegebenen Details in der Konsole angezeigt.

Außerdem ist react-hook-formdieser Code im Vergleich zu dem Code ohne (den wir am Anfang dieses Artikels gesehen haben) viel einfacher. Dies liegt daran, dass wir nicht den valueund onChange-Handler für jedes Eingabefeld hinzufügen müssen und der Anwendungsstatus nicht selbst verwaltet werden muss.

So fügen Sie dem Formular Validierungen hinzu

Now, let’s add the required field and minimum length validation to the input fields.

To add validation we can pass it to the register function which is passed as a ref to each input field like this:

We also want to display the error message if the validation fails.

When the validation fails, the errors object coming from useForm will be populated with the fields for which the validation failed.

Open the App.js file and replace its contents with the following content:

 import React from "react"; import { useForm } from "react-hook-form"; import "./styles.css"; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email  {errors.email && errors.email.type === "required" && ( 

Email is required.

)} {errors.email && errors.email.type === "pattern" && (

Email is not valid.

)} Password {errors.password && errors.password.type === "required" && (

Password is required.

)} {errors.password && errors.password.type === "minLength" && (

Password should be at-least 6 characters.

)} Login ); }

Here, for the email input field, we have provided the required and pattern matching validations.

So as you type in the email input field, the validation will run once the form is submitted.

If the validation failed, then the errors.email field inside the errors object will be populated with the type field which we used to display the error message.

 {errors.email && errors.email.type === "required" && ( 

Email is required.

)}

In the similar way, we have added the password field validation.

So as you can see, each input field is automatically focused if there is any validation error for the that input field when we submit the form.

Also, the form is not submitted as long as there is a validation error. You can see that the console.log statement is only printed if the form is valid.

So using react-hook-form reduced the amount of code that we have to write. The validation is also responsive, so once the field becomes valid, the error message goes away instantly.

But as the number of validations for each field increases, the conditional checks and error message code will still increase. So we can further refactor the code to make it even simpler.

Take a look at the below code:

 import React from 'react'; import { useForm } from 'react-hook-form'; import './styles.css'; export default function App() { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( Email  {errors.email && 

{errors.email.message}

} Password {errors.password && (

{errors.password.message}

)} Login ); }

In the code above, we have changed the email and password validation code.  

For the email input field, we changed this previous code:

to the below new code:

Here, we’ve directly provided the error message we want to display while adding the validation itself.

So we no longer need to add extra checks for each validation. We are displaying the error message using the message property available inside the errors object for each input field.

{errors.email && 

{errors.email.message}

}

So by doing it this way, the code is further simplified which makes it easy to add extra validations in future.

Note that if there are validation errors, the onSubmit handler will not be executed and the corresponding input field will automatically be focused (which is a good thing).

How to Add a Custom Validation Method

You can even provide a custom validation for the input field by adding a validate method. This is useful if you need to perform complex validations like this:

// validation function const validatePassword = (value) => { if (value.length < 6) { return 'Password should be at-least 6 characters.'; } else if ( !/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[[email protected]#$*])/.test(value) ) { return 'Password should contain at least one uppercase letter, lowercase letter, digit, and special symbol.'; } return true; }; // JSX 

Now you know how to use react-hook-form to create forms in React along with complex validations.

Why react-hook-form is better than the alternatives

Let’s look at some additional reasons that react-hook-form should become your preferred choice for working with forms.

  • Code complexity is less as compared to formik, redux-form and other alternatives.
  • react-hook-form integrates well with the yup library for schema validation so you can combine your own validation schemas.
  • The number of re-renders in the application is small compared to the alternatives.
  • Mounting time is less as compared to the alternatives.

For the actual comparison metrics, read more here.

Conclusion

In this article, we have seen how to use react-hook-form and why it's many developers' preferred choice for building both simple and complex forms in React.

You can find the GitHub source code for this application here.

If you liked this article, then you'll also love my other articles.

Subscribe to my weekly newsletter to join other 1000+ subscribers to get amazing tips, tricks, and articles directly in your inbox.