Πώς να δημιουργήσετε φόρμες στο React χρησιμοποιώντας τη φόρμα React Hook

Η δημιουργία φορμών σε μια εφαρμογή React μπορεί να είναι πολύπλοκη και χρονοβόρα. Με τη βοήθεια της βιβλιοθήκης React Hook Form, μπορείτε εύκολα να προσθέσετε φόρμες υψηλής απόδοσης στην εφαρμογή React σας.

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

Εγκατάσταση της φόρμας React Hook

Για να ξεκινήσετε να χρησιμοποιείτε τη φόρμα React Hook, πρέπει να την εγκαταστήσετε χρησιμοποιώντας τους διαχειριστές πακέτων npm ή νήμα.

Για να εγκαταστήσετε το React Hook Form χρησιμοποιώντας npm, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm εγκατάσταση react-hook-form

Για να εγκαταστήσετε το React Hook Form χρησιμοποιώντας νήμα, εκτελέστε την ακόλουθη εντολή:

νήμα προσθήκη αντιδρά-αγκίστρι-μορφή

Δημιουργία φόρμας χρησιμοποιώντας τη φόρμα React Hook

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

Ακολουθεί ένα παράδειγμα που δείχνει πώς να χρησιμοποιήσετε το useForm άγκιστρο:

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { useForm } από«αντίδραση-αγκίστρια-μορφή»;
λειτουργίαΜορφή() {
συνθ { register, handleSubmit } = useForm();
συνθ onSubmit = (δεδομένα) =>κονσόλα.log (δεδομένα);
ΕΠΙΣΤΡΟΦΗ (



'κείμενο' { ...κανω ΕΓΓΡΑΦΗ("όνομα")} />
Υποβολή</button>
 </form>
 )
}
εξαγωγήΠροκαθορισμένο Μορφή;

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

Στο μπλοκ κώδικα παραπάνω, καταχωρείτε μια είσοδο με το όνομα «όνομα». handleSubmit μέθοδος της βιβλιοθήκης React Hook Form χειρίζεται την υποβολή της φόρμας.

Για να χειριστείτε την υποβολή φόρμας, θα περάσετε τη λειτουργία επανάκλησης onΥποβολή στο handleSubmit μέθοδος. ο onΥποβολή Η συνάρτηση θα λάβει ένα αντικείμενο που περιέχει τις τιμές όλων των εισόδων της φόρμας.

Επικύρωση εισόδων με μέθοδο εγγραφής

ο κανω ΕΓΓΡΑΦΗ Η μέθοδος σάς επιτρέπει να ορίσετε κανόνες επικύρωσης για τα πεδία εισαγωγής σας. Για να προσθέσετε επικύρωση στα πεδία εισαγωγής, μεταβιβάζετε ένα αντικείμενο με κανόνες επικύρωσης ως δεύτερο όρισμα στο κανω ΕΓΓΡΑΦΗ μέθοδος.

Όπως έτσι:

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { useForm } από«αντίδραση-αγκίστρια-μορφή»;
λειτουργίαΜορφή() {
συνθ{ register, handleSubmit } = useForm();
συνθ onSubmit = (δεδομένα) =>κονσόλα.log (δεδομένα);
ΕΠΙΣΤΡΟΦΗ (



'κείμενο' { ...κανω ΕΓΓΡΑΦΗ("όνομα", { απαιτείται: αληθής})} />
'Κωδικός πρόσβασης' { ...κανω ΕΓΓΡΑΦΗ("Κωδικός πρόσβασης", { απαιτείται: αληθής, μέγιστο μήκος: 10})}/>
Υποβολή</button>
 </form>
 )
}
εξαγωγήΠροκαθορισμένο Μορφή;

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

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

ελάχ. & μέγ

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

Μπορείτε να χρησιμοποιήσετε το ελάχ και Μέγιστη κανόνες με εισόδους τύπου αριθμού, όπως αυτός:

'αριθμός' { ...κανω ΕΓΓΡΑΦΗ("ηλικία", {ελάχ: 18, Μέγιστη: 35}) } />

Η τιμή του παραπάνω πεδίου εισαγωγής πρέπει να είναι τουλάχιστον 18 και όχι μεγαλύτερη από 35.

λεπτοΜήκος

ο λεπτοΜήκος ο κανόνας είναι παρόμοιος με τον μέγιστο μήκος κανόνα αλλά ορίζει τον ελάχιστο αριθμό αλφαβητικών γραμμάτων:

'κείμενο' { ...κανω ΕΓΓΡΑΦΗ("όνομα", { λεπτοΜήκος: 10 })}/>

Σε αυτό το παράδειγμα, ο κανόνας minLength καθορίζει ότι η τιμή της εισόδου πρέπει να έχει μήκος τουλάχιστον 10 χαρακτήρες.

μοτίβο & επικύρωση

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

Για παράδειγμα:

'κείμενο' { ...κανω ΕΓΓΡΑΦΗ("όνομα", {πρότυπο: **/^[A-Za-z]+$/**}) } />
'αριθμός' { ...κανω ΕΓΓΡΑΦΗ("δοκιμή", {**επικύρωση: (αξία) => τιμή <= 12** }) } />

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

Η είσοδος "δοκιμή" χρησιμοποιεί το επικυρώνω κανόνας για τον ορισμό μιας προσαρμοσμένης συνάρτησης επικύρωσης που ελέγχει εάν η τιμή της είναι μικρότερη ή ίση με 12.

Χειρισμός σφαλμάτων στη φόρμα σας

Η βιβλιοθήκη φόρμας React Hook παρέχει έναν ενσωματωμένο μηχανισμό για χειρισμός σφαλμάτων JavaScript στις φόρμες σου. ο handleSubmit η συνάρτηση, που καλείται όταν ο χρήστης υποβάλλει τη φόρμα, επιστρέφει μια υπόσχεση που επιλύεται με τα δεδομένα της φόρμας εάν η επικύρωση είναι επιτυχής.

Ωστόσο, εάν παρουσιαστούν σφάλματα επικύρωσης, η υπόσχεση απορρίπτεται με ένα αντικείμενο σφάλματος που περιέχει τα σφάλματα επικύρωσης.

Ακολουθεί ένα παράδειγμα του τρόπου χειρισμού σφαλμάτων χρησιμοποιώντας το handleSubmit λειτουργία:

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { useForm } από«αντίδραση-αγκίστρια-μορφή»;
λειτουργίαΜορφή() {
συνθ { register, handleSubmit, μορφήΚράτος: { σφάλματα } } = useForm();
συνθ onSubmit = (δεδομένα) =>κονσόλα.log (δεδομένα); 
ΕΠΙΣΤΡΟΦΗ (



'κείμενο' { ...κανω ΕΓΓΡΑΦΗ("όνομα", { απαιτείται: αληθής})} />
 {errors.firstname && <σπιθαμή>Εισαγάγετε το Όνομά σαςσπιθαμή>}
'αριθμός' { ...κανω ΕΓΓΡΑΦΗ("ηλικία", {ελάχ: 18, Μέγιστη: 35,}) } />
 {errors.age?.type 'Μέγιστη' && <σπιθαμή> Είστε πολύ μεγάλοι για αυτόν τον ιστότοποσπιθαμή>}
 {errors.age?.type 'λεπτό' && <σπιθαμή> Είστε πολύ νέοι για αυτόν τον ιστότοποσπιθαμή>}
Υποβολή</button>
 </form>
 )
}
εξαγωγήΠροκαθορισμένο Μορφή;

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

Για το όνομα πεδίο εισαγωγής, εάν το απαιτείται ο κανόνας δεν πληρούται, ένα μήνυμα σφάλματος—"Παρακαλώ εισάγετε το όνομά σας"—θα εμφανιστεί δίπλα στο πεδίο εισαγωγής. Αν η τιμή του ηλικία Το πεδίο εισαγωγής είναι εκτός του επιτρεπόμενου εύρους, θα εμφανιστεί ένα μήνυμα σφάλματος.

Εάν η τιμή είναι μικρότερη από 18, το μήνυμα σφάλματος θα είναι "Είσαι πολύ νέος για αυτόν τον ιστότοπο" και εάν η τιμή είναι μεγαλύτερη από 35, το μήνυμα σφάλματος θα είναι "Είσαι πολύ μεγάλος για αυτόν τον ιστότοπο".

Τώρα μπορείτε να δημιουργήσετε αξιόπιστες φόρμες στο React

Η δημιουργία φορμών στο React μπορεί να είναι μια πολύπλοκη και χρονοβόρα διαδικασία. Ωστόσο, το React Hook Form απλοποιεί αυτήν την εργασία παρέχοντας μια εύχρηστη και ευέλικτη βιβλιοθήκη για τη διαχείριση δεδομένων φόρμας και την επικύρωση.

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