Διαχειριστείτε την κατάσταση αντιδράσεων με το Formik

Sep 14, 2025

πως να

(Credit Image Credit: Matt Crouch)

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

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

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

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

Τι είναι το formik;

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

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

01. Ξεκινήστε

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

 & gt; Εγκατάσταση NPM
& gt; npm Έναρξη

Ο διακομιστής ανάπτυξης θα ξεκινήσει και η εφαρμογή θα ανοίξει στη συνέχεια στο πρόγραμμα περιήγησης. Το αρχείο App.JS ελέγχει ολόκληρη την εφαρμογή που θα καταστήσει το συστατικό του δοχείου για τη φόρμα. Ανοίγω src / app.js και να εισάγετε το & lt; ψηφοφορία & gt; συστατικό.

 εισαγωγές ψηφοφορίας από το "./votecontainer".

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

 & lt; Τμήμα ClassName = "Vote-Container" & GT;
  & lt; ψηφοφορία / & gt;
& lt; / τμήμα & gt;

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

Τα έντυπα Formik μπορούν να δημιουργηθούν με δύο τρόπους. ο με χρήματα Το στοιχείο υψηλότερης τάξης μας επιτρέπει να τυλίξουμε ένα υπάρχον συστατικό ή να χρησιμοποιήσετε το & lt; formik & gt; Συστατικό με ένα πλάγιο απόδοσης που εκτελεί την ίδια λειτουργία, η οποία είναι αυτό που θα χρησιμοποιήσουμε.

Στο insecontainer.js, δημιουργήστε ένα λειτουργικό στοιχείο που θα κρατήσει όλη τη λογική για τη φόρμα. Αυτό επιστρέφει ένα & lt; formik & gt; συνιστώσα που καθιστά τη φόρμα μας. Παρέχετε μια αρχική τιμή για τα πεδία που θα προσθέσουμε αργότερα μέσω του αρχικοποιήτρια στήριγμα.

 Εισαγωγή {Formik} από το "Formik".
Εισαγωγή ψήφου από "./Vote".

Λειτουργία ψηφοφορίας () {
  επιστροφή & lt; formik
    ΑρχικήValues = {{Όνομα: "", Απάντηση: ""}}}
render = {props = & gt; & lt; ψηφοφορία {... props} / & gt;} / & gt;

03. Δημιουργία συστατικού ψηφοφορίας

ο & lt; ψηφοφορία & gt; Το στοιχείο συγκρατεί τη δομή της μορφής. Έχοντας τη λογική Logic Formik, μπορούμε να διατηρήσουμε το συστατικό της φόρμας όσο το δυνατόν απλούστερο.

Δημιουργήστε ένα στοιχείο ψηφοφορίας στο εσωτερικό της ψηφοφορίας. Οι τιμές που χρησιμοποιούν το & lt; form & gt; συστατικό από το formik. Προσθέστε ένα κουμπί για να υποβάλετε τη φόρμα ως κανονική.

 Εισαγωγή {Μορφή} από το "Formik".
Λειτουργία ψηφοφορία () {
  ΕΠΙΣΤΡΟΦΗ (
    & lt; form classname = "ψηφοφορία" & gt;
      & lt; τύπος εισόδου = "υποβολή" τιμή = "ψηφοφορία τώρα" / & gt;
    & lt; / form & gt;
  )
}

04. Προσθέστε πεδία

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

Σε ένα επίπεδο φόρμας υπάρχουν δύο συγκεκριμένα γεγονότα - υποβάλετε και επαναφέρετε. Όταν μια φόρμα υποβάλλει, χρειαζόμαστε formik για να αναλάβουμε και να εκτελέσουμε τους ελέγχους του, με την εκκαθάριση του συμβάντος επαναφοράς την κατάσταση. Το εισαγόμενο & lt; form & gt; Το συστατικό δεσμεύει αυτά τα συμβάντα στο Formik.

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

ο & lt; field & gt; η συνιστώσα κάνει την ίδια δουλειά με & lt; form & gt; κάνει για ολόκληρη τη μορφή. Δεσμεύει τα απαραίτητα συμβάντα και στηρίγματα, όπως ένα όνομα και τιμή για την εμφάνιση της κατάστασης πεδίου.

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

 Εισαγωγή {Field} από το "Formik".
& lt; ετικέτα htmlfor = "όνομα" & gt; name & lt; / label & gt;
& lt; πεδίο αυτόματη συμπλήρωση = "όνομα" id = "όνομα" όνομα = "όνομα" τύπος = "κείμενο" / & gt;

05. Λογική εφοδιασμού

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

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

Πίσω στο Intecontainer.js, μπορούμε να προσθέσουμε τη λογική της υποβολής μας. Δημιουργήστε τη λειτουργία και περάστε το στο & lt; formik & gt; συστατικό. Για αυτό το παράδειγμα, δεν θα στέλνουμε σε ένα διακομιστή, αλλά μπορούμε να χρησιμοποιήσουμε μια καθυστερημένη υπόσχεση για την προσομοίωση της καθυστέρησης του δικτύου.

 const onsubmit = async (τιμές, τσάντα) = & gt; {
    περιμένουν τη νέα υπόσχεση (αποφασιστικότητα = & gt · setimeout (αποφασιστικότητα, 1000)) ·
    bag.setsubmitting (FALSE).
    console.log ("φόρμα που υποβάλλονται", τιμές).
  };
επιστροφή & lt; formik [...] onsubmit = {onsubmit} / & gt ;;

06. Ένδειξη κατάστασης

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

 Λειτουργία Ψηφίστε ({Issubmitting}) {[...]}
& lt; Εισαγωγή απενεργοποιημένα = {Issubmitting} Τύπος = "Υποβολή" Τιμή = "Ψηφίστε τώρα" / & GT;

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

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

Η ρίζα & lt; formik & gt; Η συνιστώσα λαμβάνει επίσης μια επικύρωση, η οποία είναι μια συνάρτηση που εκτελεί επικύρωση και επιστρέφει ένα αντικείμενο. Κάθε ζεύγος κλειδιών αντιστοιχεί σε ένα πεδίο και ένα μήνυμα σφάλματος. Εάν ένα πεδίο δεν έχει αξία σε αυτό το αντικείμενο, θεωρείται έγκυρη. Η φόρμα θα υποβάλει μόνο όταν αυτή η λειτουργία επιστρέψει ένα κενό αντικείμενο. Η λειτουργία λαμβάνει τις τιμές φόρμας ως ένα επιχείρημα. Για ένα απαιτούμενο πεδίο, πρέπει μόνο να ελέγξουμε την τιμή δεν είναι μια κενή συμβολοσειρά.

Πίσω στο intecontainer.js, δημιουργήστε μια επικυρωμένη λειτουργία επανάκλησης για να ελέγξετε αυτήν την τιμή και να το συνδέσετε μέχρι το formik.

 Const επικυρώστε = τιμές = & gt; {
    const σφάλματα = {};
    Εάν (τιμές.Name === ") {
      σφάλματα.name = "όνομα απαιτείται";
    }
    Επιστρέψτε τα σφάλματα.
  };
Επιστροφή & LT; Formik [...] επικυρώστε = {Validate} / & GT ;;

08. Σφάλματα προβολής

Αυτά τα σφάλματα μεταφέρονται στη συνέχεια στην ψηφοφορία.Js ως σφάλματα. Για να εμφανίσετε σφάλματα inline, πρέπει να ταιριάξουμε τα σφάλματα στο πεδίο συγκεκριμένου φόρμου.

 Λειτουργία Ψηφοφορία ({Issubmitting, σφάλματα, άγγιξε}) {[...]}
& lt; div classname = "ομάδα εισόδου" & gt;
  & lt; ετικέτα htmlfor = "όνομα" & gt; name & lt; / label & gt;
  & lt; div
    ClassName = {classnames ({
      "Ομάδα επικύρωσης": Αληθινή,
      Σφάλμα:! Σφάλματα.Name & amp; & amp; άγγιξε.Name
    })}
  & gt;
    & lt; πεδίο αυτόματη συμπλήρωση = "όνομα" id = "όνομα" όνομα = "όνομα" type = "κείμενο" / & gt;
    {!! λάθη.Name & amp; & amp; touched.name & amp; & amp; (
      & lt; div classname = "σφάλμα-μήνυμα" & gt; {λάθη.Name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

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

09. Προσθέστε το πεδίο απαντήσεων

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

Ενώ μπορούμε να συμπεριλάβουμε πολλαπλάσια & lt; field & gt; Συστατικά με το ίδιο όνομα, πρέπει να αποφύγουμε να επαναλάβουμε όσο το δυνατόν περισσότερο. Αντ 'αυτού, ο Formik μας επιτρέπει να περάσουμε ένα προσαρμοσμένο συστατικό στο & lt; field & gt; που μπορεί να τα διαχειριστεί ως ένα.

ο & lt; anskgroup & gt; Το συστατικό λειτουργεί παρόμοιο με την είσοδο κειμένου. Χρειάζεται μια επιλογή επιλογών, η οποία είναι ένας πίνακας που περιέχει τις επιλογές για εμφάνιση. Αυτά μετατρέπονται σε στυλ ραδιοφώνου που επιτρέπουν στους χρήστες να επιλέξουν μια απάντηση. Συμπεριλάβετε αυτό το στοιχείο στην ψηφοφορία. Με τη χρήση & lt; field & gt; Παίρνει τα ίδια στηρίγματα με την είσοδο ονόματος καθώς και οποιεσδήποτε επιπλέον, στην περίπτωση αυτή το Επιλογές συνεχής.

 Εισαγωγή ομάδας απαντήσεων από "./answergroup".
& lt; field component = {optionsgroup} επιλογές = {options} όνομα = "απάντηση" / & gt;

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

 εάν (ralser.answer === "") {
  σφάλματα.Answer = "Απαιτείται απάντηση".

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

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

Διαβάστε περισσότερα:

Πώς να δοκιμάσετε τις ιστοσελίδες και τις εφαρμογές
6 τεράστιες τάσεις σχεδιασμού ιστοσελίδων για το 2020
Δάσκαλος μινιμαλισμός στο σχεδιασμό ιστοσελίδων

Διαχειριστείτε την κατάσταση αντιδράσεων με το Formik

Τι είναι το formik;

01. Ξεκινήστε

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

03. Δημιουργία συστατικού ψηφοφορίας

04. Προσθέστε πεδία

05. Λογική εφοδιασμού

06. Ένδειξη κατάστασης

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

08. Σφάλματα προβολής

09. Προσθέστε το πεδίο απαντήσεων

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σχεδιάσετε ένα λαιμό και τους ώμους

Πώς να συμπιέζει εικόνες: Ένας οδηγός σχεδιαστή ιστοσελίδων

Δημιουργία ατελείωτων χρωμάτων παλέτες με KHROMA

Σχεδιάστε μια ιστοσελίδα ανταποκρινόμενης με μέγεθος με βάση το EM

Πώς να κάνετε νόστιμες υφές με μολύβια

Χρώμα όπως ένας ιμπρεσιονιστής

Τέσσερις αρχές στρατηγικής UX

Πώς να τέλειες τρίχες στα πορτρέτα σας

Κατηγορίες