Πώς να φτιάξετε φόρμες στο React με τη βιβλιοθήκη του re-hook-form

Σε αυτό το άρθρο, θα διερευνήσουμε τη βιβλιοθήκη αντιδράσεων.

Θα μάθετε πώς να χρησιμοποιείτε και να ενσωματώνετε αυτήν τη βιβλιοθήκη με το React. Θα δούμε επίσης γιατί γίνεται δημοφιλής επιλογή για τη δημιουργία τόσο απλών όσο και σύνθετων φορμών με πρόσθετη υποστήριξη για το χειρισμό σύνθετων επικυρώσεων.

Ας αρχίσουμε

Η εργασία με φόρμες στο React είναι μια πολύπλοκη εργασία. Και γίνεται πιο περίπλοκο όταν ο αριθμός των πεδίων εισαγωγής αυξάνεται μαζί με τις επικυρώσεις.

Ρίξτε μια ματιά στον παρακάτω κώδικα:

 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 ); }

Ακολουθεί μια επίδειξη Code Sandbox: //codesandbox.io/s/login-form-zjxs9.

Στον παραπάνω κώδικα, έχουμε μόνο 2 πεδία εισαγωγής, δηλαδή emailκαι password, και ένα κουμπί υποβολής.

Κάθε πεδίο εισαγωγής έχει ένα valueκαι onChangeχειριστή προστιθέμενο, ώστε να μπορούμε να ενημερώσουμε την κατάσταση με βάση την είσοδο του χρήστη.

Επίσης, έχουμε προσθέσει μια handleSubmitμέθοδο που εμφανίζει τα δεδομένα που έχουν εισαχθεί στη φόρμα στην κονσόλα.

Φαίνεται καλά. Τι γίνεται όμως αν χρειαστεί να προσθέσουμε επικυρώσεις όπως απαιτούμενη επικύρωση πεδίου, επικύρωση ελάχιστου μήκους, επικύρωση κωδικού πρόσβασης, επικύρωση πεδίου email και επίσης να εμφανίσουμε τα αντίστοιχα μηνύματα σφάλματος;

Ο κώδικας θα γίνει πιο περίπλοκος και μακρύς καθώς ο αριθμός των πεδίων εισαγωγής και οι επικυρώσεις τους αυξάνονται.

Αυτή είναι μια πολύ κοινή απαίτηση σε οποιαδήποτε εφαρμογή. Έτσι εύκολα εργασία με φόρμες, υπάρχουν διάφορες βιβλιοθήκες διαθέσιμες, όπως Formik, redux-form, react-final-form, react-hook-formκαι ούτω καθεξής.

Αλλά αυτό που κερδίζει μεγάλη δημοτικότητα είναι η react-hook-formβιβλιοθήκη.

Ας μάθουμε λοιπόν γιατί και πώς να το χρησιμοποιήσουμε. Για αυτό, θα δημιουργήσουμε μια νέα εφαρμογή React.

Δημιουργήστε ένα νέο έργο React εκτελώντας την ακόλουθη εντολή από το τερματικό:

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

Μόλις δημιουργηθεί το έργο, διαγράψτε όλα τα αρχεία από το srcφάκελο και δημιουργήστε νέα index.jsκαι styles.cssαρχεία μέσα στο srcφάκελο.

Για να εγκαταστήσετε τη βιβλιοθήκη φόρμας, εκτελέστε την ακόλουθη εντολή από το τερματικό:

yarn add react-hook-form

Πώς να δημιουργήσετε αρχικές σελίδες

Ανοίξτε το src/index.jsαρχείο και προσθέστε το ακόλουθο περιεχόμενο μέσα σε αυτό:

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

Ανοίξτε το src/styles.cssαρχείο και προσθέστε το περιεχόμενο από εδώ μέσα σε αυτό.

Τώρα, δημιουργήστε ένα νέο αρχείο App.jsμέσα στο srcφάκελο με το ακόλουθο περιεχόμενο:

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

Εδώ, μόλις προσθέσαμε τα πεδία email και κωδικού πρόσβασης στη φόρμα.

Βασική Δημιουργία Φόρμας Χρησιμοποιώντας μορφή αντιδραστηρίου

Η react-hook-formβιβλιοθήκη παρέχει ένα useFormάγκιστρο που μπορούμε να χρησιμοποιήσουμε για να δουλέψουμε με φόρμες.

Εισαγάγετε το useFormάγκιστρο ως εξής:

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

Χρησιμοποιήστε το useFormγάντζο ως εξής:

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

Εδώ,

  • register είναι μια συνάρτηση που πρέπει να χρησιμοποιείται ως ref που παρέχεται από το useFormάγκιστρο. Μπορούμε να το αντιστοιχίσουμε σε κάθε πεδίο εισαγωγής έτσι ώστε react-hook-formνα μπορεί να παρακολουθεί τις αλλαγές για την τιμή του πεδίου εισαγωγής.
  • handleSubmit είναι η λειτουργία που μπορούμε να καλέσουμε κατά την υποβολή της φόρμας
  • Τα σφάλματα θα περιέχουν τα σφάλματα επικύρωσης, εάν υπάρχουν

Τώρα, αντικαταστήστε τα περιεχόμενα του App.jsαρχείου με το ακόλουθο περιεχόμενο:

 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 ); }

Στον παραπάνω κώδικα, έχουμε δώσει μια αναφορά σε κάθε πεδίο εισαγωγής που έχουμε από το useFormάγκιστρο.

ref={register}

Επίσης, προσθέσαμε τη συνάρτηση onSubmit η οποία μεταφέρεται στη συνάρτηση handleSubmit.

Λάβετε υπόψη ότι για κάθε πεδίο εισαγωγής, έχουμε δώσει ένα μοναδικό όνομα που είναι υποχρεωτικό, ώστε react-hook-formνα μπορείτε να παρακολουθείτε τα δεδομένα που αλλάζουν.

Όταν υποβάλλουμε τη φόρμα, η συνάρτηση handleSubmit θα χειριστεί την υποβολή της φόρμας. Θα στείλει τα δεδομένα που εισάγει ο χρήστης στη συνάρτηση onSubmit την οποία καταγράφουμε στην κονσόλα.

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

Τώρα, ξεκινήστε την εφαρμογή εκτελώντας την yarn startεντολή.

Όπως μπορείτε να δείτε, κατά την υποβολή της φόρμας, οι λεπτομέρειες που εισήγαγε ο χρήστης εμφανίζονται στην κονσόλα.

Επίσης, σε σύγκριση με τον κώδικα χωρίς react-hook-form(τον οποίο είδαμε στην αρχή αυτού του άρθρου), αυτός ο κώδικας είναι πολύ πιο απλός. Αυτό συμβαίνει επειδή δεν χρειάζεται να προσθέσουμε το χειριστήριο valueκαι onChangeγια κάθε πεδίο εισαγωγής και δεν χρειάζεται να διαχειριστούμε οι ίδιοι την κατάσταση της εφαρμογής.

Τρόπος προσθήκης επικυρώσεων στη φόρμα

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

Σε αυτό το άρθρο, έχουμε δει πώς να χρησιμοποιούν react-hook-formκαι γιατί είναι η προτιμώμενη επιλογή πολλών προγραμματιστών για τη δημιουργία τόσο απλών όσο και σύνθετων φορμών στο React.

Μπορείτε να βρείτε τον πηγαίο κώδικα GitHub για αυτήν την εφαρμογή εδώ.

Αν σας άρεσε αυτό το άρθρο, τότε θα λατρέψετε και τα άλλα άρθρα μου.

Εγγραφείτε στο εβδομαδιαίο ενημερωτικό δελτίο μου για να εγγραφείτε με άλλους 1000+ συνδρομητές για να λάβετε απίθανες συμβουλές, κόλπα και άρθρα απευθείας στα εισερχόμενά σας.