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

Η εργασία με φόρμες και στοιχεία φόρμας κατά την ανάπτυξη με το React μπορεί να είναι περίπλοκη επειδή τα στοιχεία φόρμας HTML συμπεριφέρονται κάπως διαφορετικά στο React από άλλα στοιχεία DOM.

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

Διαχείριση πεδίων εισαγωγής σε φόρμες

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

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

λειτουργίαApp() {

const [firstName, setFirstName] = React.useState('');

λειτουργίαhandleFirstNameChange(Εκδήλωση) {
setFirstName( Εκδήλωση.στόχος.αξία )
}

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<τύπος εισόδου='κείμενο' placeholder='Ονομα' onInput={handleFirstNameChange} />
</form>
)
}

Παραπάνω έχουμε ένα όνομα

instagram viewer
κράτος, an onInput εκδήλωση και α λαβήΑλλαγή χειριστής. ο λαβήΑλλαγή η λειτουργία εκτελείται με κάθε πάτημα πλήκτρων για ενημέρωση του όνομα κατάσταση.

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

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

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

λειτουργίαApp() {

συνθ [formData, setFormData] = React.useState(
{
όνομα: '',
επίθετο: ''
}
);

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<τύπος εισόδου='κείμενο' placeholder='Ονομα' όνομα='όνομα' />
<τύπος εισόδου='κείμενο' placeholder='Επίθετο' όνομα='επίθετο' />
</form>
)
}

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

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

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

λειτουργίαApp() {

συνθ [formData, setFormData] = React.useState(
{
όνομα: '',
επίθετο: ''
}
);

λειτουργίαλαβήΑλλαγή(Εκδήλωση) {
setFormData( (prevState) => {
ΕΠΙΣΤΡΟΦΗ {
...prevState,
[event.target.name]: Εκδήλωση.στόχος.αξία
}
})
}

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<εισαγωγή
τύπος='κείμενο'
placeholder='Ονομα'
όνομα='όνομα'
onInput={handleChange}
/>
<εισαγωγή
τύπος='κείμενο'
placeholder='Επίθετο'
όνομα='επίθετο'
onInput={handleChange}
/>
</form>
)
}

Το μπλοκ κώδικα παραπάνω χρησιμοποιούσε ένα onInput εκδήλωση και λειτουργία χειριστή, handleFirstNameChange. Αυτό handleFirstNameChange η συνάρτηση θα ενημερώσει τις ιδιότητες κατάστασης όταν καλείται. Οι τιμές των ιδιοτήτων κατάστασης θα είναι ίδιες με αυτές των αντίστοιχων στοιχείων εισόδου τους.

Μετατροπή των εισόδων σας σε ελεγχόμενα στοιχεία

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

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

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

λειτουργίαApp() {

συνθ [formData, setFormData] = React.useState(
{
όνομα: '',
επίθετο: ''
}
);

λειτουργίαλαβήΑλλαγή(Εκδήλωση) {
setFormData( (prevState) => {
ΕΠΙΣΤΡΟΦΗ {
...prevState,
[event.target.name]: Εκδήλωση.στόχος.αξία
}
})
}

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<εισαγωγή
τύπος='κείμενο'
placeholder='Ονομα'
όνομα='όνομα'
onInput={handleChange}
value={formData.firstName}
/>
<εισαγωγή
τύπος='κείμενο'
placeholder='Επίθετο'
όνομα='επίθετο'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}

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

Χειρισμός του στοιχείου εισόδου Textarea

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

Σε ένα αρχείο index.html, το ετικέτα textarea Το στοιχείο καθορίζει την τιμή του από τα παιδιά του, όπως φαίνεται στο μπλοκ κώδικα παρακάτω:

<textarea>
Γεια πώς είσαι?
</textarea>

Με το React, για να χρησιμοποιήσετε το textarea στοιχείο, μπορείτε να δημιουργήσετε ένα στοιχείο εισόδου με τον τύπο textarea.

Όπως έτσι:

λειτουργίαApp() {

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<τύπος εισόδου='textarea' όνομα='μήνυμα'/>
</form>
)
}

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

λειτουργίαApp() {

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<textarea
όνομα='μήνυμα'
αξία='Γεια πώς είσαι?'
/>
</form>
)
}

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

Εργασία με το στοιχείο εισόδου του πλαισίου ελέγχου React

Τα πράγματα είναι λίγο διαφορετικά όταν δουλεύεις πλαίσιο ελέγχου εισροές. Το πεδίο εισαγωγής του τύπου πλαίσιο ελέγχου δεν έχει χαρακτηριστικό value. Ωστόσο, έχει ένα τετραγωνισμένος Χαρακτηριστικό. Αυτό τετραγωνισμένος Το χαρακτηριστικό διαφέρει από ένα χαρακτηριστικό τιμής απαιτώντας μια δυαδική τιμή για να προσδιοριστεί εάν το πλαίσιο είναι επιλεγμένο ή μη.

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

λειτουργίαApp() {

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<τύπος εισόδου='πλαίσιο ελέγχου' id='την ένταξη' όνομα='Συμμετοχή' />
<ετικέτα htmlFor='την ένταξη'>Θα θέλατε να γίνετε μέλος της ομάδας μας;</label>
</form>
)
}

Το στοιχείο ετικέτας αναφέρεται στο αναγνωριστικό του στοιχείου εισόδου χρησιμοποιώντας το htmlΓια Χαρακτηριστικό. Αυτό htmlΓια Το χαρακτηριστικό παίρνει το αναγνωριστικό του στοιχείου εισόδου—σε αυτήν την περίπτωση, την ένταξη. Οταν δημιουργία μιας φόρμας HTML, ο htmlΓια το χαρακτηριστικό αντιπροσωπεύει το Για Χαρακτηριστικό.

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

Θα πρέπει να συμπεριλάβετε δύο στηρίγματα στο πλαίσιο ελέγχου στοιχείο εισόδου: α τετραγωνισμένος ιδιοκτησία και μια onChange συμβάν με μια συνάρτηση χειριστή που θα καθορίσει την τιμή της κατάστασης χρησιμοποιώντας το setIsChecked() λειτουργία.

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

λειτουργίαApp() {

συνθ [isChecked, setIsChecked] = React.useState(ψευδής);

λειτουργίαλαβήΑλλαγή() {
setIsChecked( (prevState) => !prevState )
}

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<εισαγωγή
τύπος='πλαίσιο ελέγχου'
id='την ένταξη'
όνομα='Συμμετοχή'
checked={είναι ελεγμένο}
onChange={handleChange}
/>
<ετικέτα htmlFor='την ένταξη'>Θα θέλατε να γίνετε μέλος της ομάδας μας;</label>
</form>
)
}

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

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

Σε τέτοιες περιπτώσεις, μπορείτε να τα χειριστείτε με παρόμοιο τρόπο με τον τρόπο που χειριστήκατε πολλαπλά στοιχεία εισόδου του ίδιου τύπου.

Εδώ είναι ένα παράδειγμα:

λειτουργίαApp() {

αφήνω[formData, setFormData] = React.useState(
{
όνομα: ''
Συμμετοχή: αληθής,
}
);

λειτουργίαλαβήΑλλαγή(Εκδήλωση) {

συνθ {name, value, type, checked} = event.target;

setFormData( (prevState) => {
ΕΠΙΣΤΡΟΦΗ {
...prevState,
[όνομα]: τύπος πλαίσιο ελέγχου; ελεγμένο: αξία
}
})
}

ΕΠΙΣΤΡΟΦΗ (
<μορφή>
<εισαγωγή
τύπος='κείμενο'
placeholder='Ονομα'
όνομα='όνομα'
onInput={handleChange}
value={formData.firstName}
/>
<εισαγωγή
τύπος='πλαίσιο ελέγχου'
id='την ένταξη'
όνομα='Συμμετοχή'
checked={formData.join}
onChange={handleChange}
/>
<ετικέτα htmlFor='την ένταξη'>Θα θέλατε να γίνετε μέλος της ομάδας μας;</label>
</form>
)
}

Σημειώστε ότι στο λαβήΑλλαγή λειτουργία, setFormData χρησιμοποιεί έναν τριαδικό τελεστή για να εκχωρήσει την τιμή του τετραγωνισμένος ιδιότητα στις ιδιότητες κατάστασης εάν ο τύπος εισόδου προορισμού είναι a πλαίσιο ελέγχου. Εάν όχι, εκχωρεί τις τιμές του αξία Χαρακτηριστικό.

Τώρα μπορείτε να χειριστείτε φόρμες αντίδρασης

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

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