Διαχείριση κατάστασης φόρμας React με το Formik

Περιεχόμενο

• Τι είναι το Formik;
• 01. Ξεκινήστε
• 02. Δημιουργία φόρμας Formik
• 03. Δημιουργία στοιχείων ψηφοφορίας
• 04. Προσθήκη πεδίων
• 05. Λογική προσφοράς
• 06. Κατάσταση οθόνης
• 07. Προσθήκη πεδίου ονόματος
• 08. Εμφανίζονται σφάλματα
• 09. Προσθήκη πεδίου απάντησης

Καλώς ορίσατε στον οδηγό μας σχετικά με τον τρόπο διαχείρισης της κατάστασης φόρμας React με το Formik. Τα στοιχεία φόρμας διατηρούν τις τιμές τους στη δική τους εσωτερική κατάσταση - σε αντίθεση με την κρατική προσέγγιση του React. Για να συνεργαστούμε τα δύο, χρειαζόμαστε μια πιο εμπλεκόμενη λύση, όπως η χρήση ελεγχόμενων εξαρτημάτων για κάθε πεδίο.

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

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

• Κατεβάστε τα αρχεία προέλευσης

Τι είναι το Formik;

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

Για να μας βοηθήσουν να εξερευνήσουμε τι μπορεί να κάνει η Formik, θα δημιουργήσουμε μια μικρή αίτηση ψηφοφορίας. Ο χρήστης μπορεί να εισαγάγει το όνομά του και να ψηφίσει μία από τις παρεχόμενες επιλογές. Εάν όλα είναι καλά, η φόρμα θα υποβληθεί, αλλά, αν όχι, ο χρήστης λαμβάνει ένα μήνυμα σφάλματος.

01. Ξεκινήστε

Για να ξεκινήσετε, ανοίξτε τον κατάλογο «φροντιστήριο» από τα αρχεία εκμάθησης στη γραμμή εντολών. Εγκαταστήστε τις εξαρτήσεις και ξεκινήστε τον διακομιστή. Αυτή η εφαρμογή βασίζεται στην εφαρμογή create-react-app και περιλαμβάνει τα πακέτα της, μαζί με το ίδιο το Formik και μερικά άλλα για να βοηθήσουν στο στυλ.

> εγκατάσταση npm> έναρξη npm

Ο διακομιστής ανάπτυξης θα ξεκινήσει και η εφαρμογή ανοίγει στη συνέχεια στο πρόγραμμα περιήγησης. Το αρχείο App.js ελέγχει ολόκληρη την εφαρμογή που θα καταστήσει το στοιχείο κοντέινερ μας για τη φόρμα. Ανοίγω src / App.js και εισαγάγετε το VoteContainer> συστατικό.

εισαγωγή VoteContainer από "./VoteContainer";

Στη συνέχεια, προσθέστε το στην εφαρμογή.

ενότητα className = "vote-container"> VoteContainer /> / ενότητα>

02. Δημιουργία φόρμας Formik

Οι φόρμες Formik μπορούν να δημιουργηθούν με δύο τρόπους. ο με τον Φόρμικ το στοιχείο υψηλότερης τάξης μας επιτρέπει να τυλίγουμε ένα υπάρχον στοιχείο ή να χρησιμοποιήσουμε το Formik> στοιχείο με ένα στήριγμα απόδοσης που εκτελεί την ίδια λειτουργία, που είναι αυτό που θα χρησιμοποιούμε.

Μέσα στο VoteContainer.js, δημιουργήστε ένα λειτουργικό στοιχείο που θα διατηρεί όλη τη λογική για τη φόρμα. Αυτό επιστρέφει a Formik> στοιχείο που αποδίδει τη φόρμα μας. Καταχωρίστε μια τιμή εκκίνησης για τα πεδία που θα προσθέσουμε αργότερα μέσω του αρχικές τιμές στήριγμα.

εισαγωγή {Formik} από το "formik"; Εισαγωγή ψηφοφορίας από "./Vote"; συνάρτηση VoteContainer () {return Formik initialValues ​​= {{name: "", answer: ""}} render = {props => Vote {... props} />} />

03. Δημιουργία στοιχείων ψηφοφορίας

ο Ψηφίστε> το στοιχείο κρατά τη δομή της φόρμας. Έχοντας ξεχωριστή τη λογική του Formik μπορούμε να διατηρήσουμε το στοιχείο φόρμας όσο το δυνατόν πιο απλό.

Δημιουργήστε ένα στοιχείο ψηφοφορίας μέσα στο Vote.js που κάνει χρήση του Φόρμα> συστατικό από τη Formik. Προσθέστε ένα κουμπί για να υποβάλετε τη φόρμα ως συνήθως.

εισαγωγή {Form} από το "formik"; συνάρτηση Vote () {return (Form className = "vote"> input type = "submit" value = "Vote now" /> / Form>); }

04. Προσθήκη πεδίων

Η Formik παρακολουθεί τις αλλαγές σε κάθε πεδίο και θα τις παρέχει μόλις υποβληθεί η φόρμα. Το κάνει όλα αυτά μέσα από τα γεγονότα που εκπέμπονται από τη φόρμα και κάθε πεδίο μέσα σε αυτό.

Σε επίπεδο φόρμας υπάρχουν δύο συγκεκριμένα συμβάντα - υποβολή και επαναφορά. Όταν υποβάλλεται μια φόρμα, χρειαζόμαστε το Formik να αναλάβει και να πραγματοποιήσει τους ελέγχους του, με το συμβάν επαναφοράς να διαγράφει την κατάσταση. Το εισαγόμενο Φόρμα> Το στοιχείο δεσμεύει αυτά τα συμβάντα στο Formik.

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

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

Προσθέστε ένα πεδίο στη φόρμα και συνδέστε το σε μια ετικέτα. Αυτά λειτουργούν όπως θα κάνατε σε κανονικές μορφές HTML.

εισαγωγή {Field} από το "formik"; label htmlFor = "name"> Name / label> Field autoComplete = "name" id = "name" name = "name" type = "text" />

05. Λογική προσφοράς

Δεν χρειάζεται να εργαζόμαστε με εκδηλώσεις προγράμματος περιήγησης για υποβολή, ως Υποβολή η εκδήλωση αντιμετωπίζεται για εμάς. Αλλά πρέπει να παρέχουμε τη λογική για να χειριστούμε την υποβολή. Το callback εξακολουθεί να καλείται Υποβολή αλλά αντ 'αυτού λαμβάνει τις τιμές της φόρμας απευθείας. Λαμβάνει επίσης την «τσάντα» - ένα αντικείμενο που περιέχει μερικές μεθόδους αλληλεπίδρασης με τη φόρμα ενώ υποβάλλει.

Δεδομένου ότι αυτά τα δεδομένα συνήθως κατευθύνονται σε έναν διακομιστή, αυτή η λειτουργία μπορεί επίσης να είναι ασύγχρονη. Το Formik έχει ένα ειδικό είναι Υποβολή υποστηρίξτε ότι ορίζεται σε πραγματική αυτόματα μόλις ξεκινήσει η υποβολή. Με μια συνάρτηση async, μπορούμε να περιμένουμε μέχρι να υποβληθεί η φόρμα και να την επαναφέρουμε σε false.

Πίσω στο VoteContainer.js, μπορούμε να προσθέσουμε τη λογική υποβολής μας. Δημιουργήστε τη συνάρτηση και μεταδώστε την στο Formik> συστατικό. Για αυτό το παράδειγμα, δεν θα στέλνουμε σε διακομιστή, αλλά μπορούμε να χρησιμοποιήσουμε μια καθυστερημένη υπόσχεση για να προσομοιώσουμε την καθυστέρηση δικτύου.

const onSubmit = async (τιμές, τσάντα) => {αναμονή νέας υπόσχεσης (επίλυση => setTimeout (επίλυση, 1000)); bag.setSubmitting (false); console.log ("Υποβολή φόρμας", τιμές); }; επιστροφή Formik [...] onSubmit = {onSubmit} />;

06. Κατάσταση οθόνης

Πρέπει επίσης να εμφανίσουμε αυτήν την κατάσταση υποβολής στη φόρμα. Για να αποτρέψουμε τη διπλή υποβολή, μπορούμε να απενεργοποιήσουμε το κουμπί κατά την υποβολή της φόρμας. Ο Formik το μεταδίδει στη φόρμα μέσα στο Vote.js ως στήριγμα. Μπορούμε να το βγάλουμε και να το εφαρμόσουμε στο κουμπί.

συνάρτηση Vote ({isSubmitting}) {[…]} απενεργοποιημένη εισαγωγή = {isSubmitting} type = "submit" value = "Vote now" />

07. Προσθήκη πεδίου ονόματος

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

Η ρίζα Formik> Το στοιχείο λαμβάνει επίσης ένα στήριγμα επικύρωσης, το οποίο είναι μια συνάρτηση που εκτελεί επικύρωση και επιστρέφει ένα αντικείμενο. Κάθε ζεύγος κλειδιού-τιμής αντιπροσωπεύει ένα πεδίο και ένα μήνυμα σφάλματος. Εάν ένα πεδίο δεν έχει τιμή σε αυτό το αντικείμενο, θεωρείται έγκυρο. Η φόρμα θα υποβληθεί μόνο όταν αυτή η συνάρτηση επιστρέψει ένα κενό αντικείμενο. Η συνάρτηση λαμβάνει τις τιμές φόρμας ως όρισμα. Για ένα απαιτούμενο πεδίο, πρέπει μόνο να ελέγξουμε ότι η τιμή δεν είναι μια κενή συμβολοσειρά.

Επιστροφή μέσα στο VoteContainer.js, δημιουργήστε μια συνάρτηση επικύρωσης επανάκλησης για να ελέγξετε αυτήν την τιμή και να την συνδέσετε με το Formik.

const validate = τιμές => {const σφάλματα = {}; if (values.name === "") {error.name = "Απαιτείται όνομα"; } σφάλματα επιστροφής; }; επιστροφή Formik [...] validate = {validate} />;

08. Εμφανίζονται σφάλματα

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

συνάρτηση Vote ({isSubmitting, σφάλματα, touch}) {[…]} div className = "input-group"> label htmlFor = "name"> Name / label> div className = {classNames ({"validation-group": true , σφάλμα: !! error.name && Touch.name})}> Αυτόματη συμπλήρωση πεδίου = "name" id = "name" name = "name" type = "text" /> {!! error.name && touch.name && (div className = "error-message"> {error.name} / div>)} / div> / div>

Η Formik επικυρώνει τη φόρμα κάθε φορά που ενημερώνεται. Μια φόρμα με πολλά πεδία θα έπληττε αμέσως με σφάλματα μετά την πρώτη αλλαγή. Για να αποφευχθεί αυτό, εμφανίζεται το σφάλμα μόνο όταν ένα πεδίο έχει «αγγίξει», που σημαίνει ότι έχει αλληλεπιδράσει σε κάποιο σημείο. Όταν υποβληθεί μια φόρμα, το Formik θα αγγίξει όλα τα πεδία και θα εμφανίσει τυχόν κρυφά σφάλματα.

09. Προσθήκη πεδίου απάντησης

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

Ενώ μπορούμε να συμπεριλάβουμε πολλαπλάσια Πεδίο> συστατικά με το ίδιο όνομα, θα πρέπει να αποφύγουμε να επαναλαμβάνουμε όσο το δυνατόν περισσότερο. Αντ 'αυτού, η Formik μας επιτρέπει να περάσουμε ένα προσαρμοσμένο στοιχείο στο Field> που μπορεί να τα διαχειριστεί ως ένα.

ο Απάντηση Ομάδα> Το στοιχείο λειτουργεί παρόμοιο με την εισαγωγή κειμένου. Χρειάζεται ένα στήριγμα επιλογών, που είναι ένας πίνακας που περιέχει τις επιλογές για εμφάνιση. Αυτά μετατρέπονται σε στυλ κουμπιά επιλογής που επιτρέπουν στους χρήστες να επιλέξουν μια απάντηση. Συμπεριλάβετε αυτό το στοιχείο στο Vote.js. Με τη χρήση Πεδίο> παίρνει τα ίδια στηρίγματα με το όνομα εισαγωγής καθώς και τυχόν πρόσθετα, σε αυτήν την περίπτωση το ΕΠΙΛΟΓΕΣ συνεχής.

εισαγάγετε το ResponsGroup από το "./AnswerGroup"; Στοιχείο πεδίου = {ResponsGroup} επιλογές = {ΕΠΙΛΟΓΕΣ} όνομα = "απάντηση" />

Τέλος, πρέπει να απαιτήσουμε μια απάντηση στη λειτουργία επικύρωσης και στο VoteContainer.js. Η διαδικασία εκεί είναι ίδια με το πεδίο ονόματος.

if (values.answer === "") {error.answer = "Απαιτείται απάντηση";

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

Αυτό το περιεχόμενο εμφανίστηκε αρχικά στο καθαρό περιοδικό. Διαβάστε περισσότερα από μας άρθρα σχεδιασμού ιστοσελίδων εδώ.