Πώς να αλλάξετε την κατάσταση ενός εξαρτήματος παιδιού από τον γονέα του στο React

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

Ας αρχίσουμε.

Πρώτον, θα δημιουργήσουμε ένα Superheroστοιχείο με ένα nameχαρακτηριστικό σε κατάσταση. Αυτό το στοιχείο θα το αποδώσει nameπρώτα.

Τώρα ας δημιουργήσουμε μια συνάρτηση changeName()στο Superheroστοιχείο. Αυτή η συνάρτηση θα αλλάξει το όνομα σε κατάσταση σε πραγματικό όνομα του υπερήρωα.

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

Το πλήρες στοιχείο Superhero θα μοιάζει με αυτό:

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

Έχουμε προσθέσει μια συνάρτηση handleClick()που θα κληθεί όταν ο χρήστης κάνει κλικ στο κουμπί. Πρέπει να βρούμε έναν τρόπο ενημέρωσης της κατάστασης του θυγατρικού στοιχείου, δηλαδή του Superheroστοιχείου.

Έχουμε δημιουργήσει μια συνάρτηση changeName()στο Superheroστοιχείο. Αυτή η λειτουργία θα εμφανίσει το πραγματικό όνομα του υπερήρωα. Εάν μπορούμε να καλέσουμε αυτήν τη συνάρτηση από το Appστοιχείο, η δουλειά μας έχει ολοκληρωθεί. Έτσι θα ονομάσουμε αυτήν τη λειτουργία.

Εδώ έρχονται οι διαιτητές για να μας σώσουν.

Ας δημιουργήσουμε μια αναφορά του Superheroστοιχείου στο Appστοιχείο. Εδώ είναι ο κωδικός για να το κάνετε αυτό.

Εδώ έχουμε δημιουργήσει μια React.createRef()μέθοδο χρήσης ref και προσαρτήσαμε το ref στο Superheroστοιχείο χρησιμοποιώντας το refχαρακτηριστικό.

Τώρα θα μπορούμε να αναφέρουμε τον Superheroκόμβο χρησιμοποιώντας this.superheroElement.current. Θα μπορούμε επίσης να καλέσουμε τη changeName()συνάρτηση στο Superheroστοιχείο χρησιμοποιώντας this.superheroElement.current.changeName().

Ας ενημερώσουμε τη handleClick()λειτουργία μας στο Appστοιχείο μας για να καλέσουμε τη changeName()συνάρτηση.

Η handleClick()λειτουργία μας θα μοιάζει με αυτήν.

Μπορείτε να δείτε τον πλήρη κωδικό στο παρακάτω περιβάλλον δοκιμών.

CodeSandbox

Το CodeSandbox είναι ένας διαδικτυακός επεξεργαστής προσαρμοσμένος για εφαρμογές Ιστού. κώδικεςandbox.io

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