de Johny Thomas

Cum se schimbă starea unei componente copil din părintele său în React

Cum se schimba starea unei componente copil din parintele sau
Fotografie de Clément H (@clemhlrdt) pe Unsplash

Vom construi o aplicație simplă React care arată numele real al unui supererou printr-un clic pe buton.

Să începem.

În primul rând, vom crea un Superhero componentă cu a name atribut în stare. Această componentă va reda asta name primul.

Cum se schimba starea unei componente copil din parintele sau

Acum să creăm o funcție changeName() în Superhero componentă. Această funcție va schimba numele de stat în numele real al supereroului.

1611463264 493 Cum se schimba starea unei componente copil din parintele sau

Acum avem Superhero componentă care arată numele supereroului și o funcție care actualizează numele la numele său real.

Componenta superherou completă va arăta astfel:

1611463265 124 Cum se schimba starea unei componente copil din parintele sau

Acum să creăm App componentă care va reda acest lucru Superhero componentă și un buton. Când facem clic pe buton, acesta arată numele real al supereroului.

1611463265 835 Cum se schimba starea unei componente copil din parintele sau

Am adăugat o funcție handleClick() care va fi apelat atunci când utilizatorul face clic pe buton. Trebuie să găsim o modalitate de a actualiza starea componentei copil, adică Superhero componentă.

Am creat o funcție changeName() în Superhero componentă. Această funcție va arăta numele real al supereroului. Dacă putem apela această funcție din App componentă, munca noastră este terminată. Deci vom numi această funcție.

Iată unde ref vino în salvarea noastră.

Să creăm o referință a Superhero componentă în App componentă. Iată codul pentru a face asta.

1611463265 196 Cum se schimba starea unei componente copil din parintele sau

Aici am creat un ref folosind React.createRef() și a atașat referința la Superhero componentă folosind ref atribut.

Acum vom putea face referire la Superhero nod folosind this.superheroElement.current. De asemenea, vom putea apela changeName() funcție în Superhero folosind componenta this.superheroElement.current.changeName().

Să ne actualizăm handleClick() funcția noastră App componentă pentru a apela changeName() funcţie.

Al nostru handleClick() funcția va arăta astfel.

1611463265 918 Cum se schimba starea unei componente copil din parintele sau

Puteți verifica codul complet în sandbox-ul de mai jos.

CodeSandbox
CodeSandbox este un editor online adaptat pentru aplicații web.codesandbox.io

Acum am învățat cum să actualizăm starea unei componente copil dintr-o componentă părinte?. Sper că acest lucru a fost de ajutor.