Egy egyszerű React alkalmazást építünk, amely egy gombnyomásra megmutatja a szuperhős valódi nevét.
Kezdjük el.
Először létrehozunk egy Superheroösszetevőt, amelynek nameállapota attribútum. Ez az összetevő előbb ezt rendereli name.
Most hozzunk létre egy függvényt changeName()az Superheroösszetevőben. Ez a függvény megváltoztatja az állapotban lévő nevet a szuperhős tényleges nevére.
Most megvan az a Superherokomponens, amely a szuperhős nevét mutatja, és egy olyan funkció, amely frissíti a nevet az igazi nevére.
A teljes szuperhős-komponens így fog kinézni:
Most hozzuk létre azt az Appösszetevőt, amely ezt az Superheroösszetevőt megjeleníti, és egy gombot. Amikor rákattintunk a gombra, megjelenik a valódi szuperhős neve.
Hozzáadtunk egy funkciót, handleClick()amelyet akkor hívunk meg, amikor a felhasználó rákattint a gombra. Ki kell találnunk a gyermekkomponens, vagyis a Superherokomponens állapotának frissítésének módját .
Létrehoztunk egy funkciót changeName()a Superherokomponens. Ez a funkció megmutatja a szuperhős valódi nevét. Ha ezt a függvényt meghívhatjuk az Appösszetevőből, akkor a munkánk elkészült. Tehát ezt a függvényt hívjuk.
Itt jönnek a referenciák megmentésünkre.
Hozzunk létre egy Superherokomponenst a Appkomponensben. Itt van ennek a kódja.
Itt létrehoztunk egy ref React.createRef()metódust, és Superheroaz refattribútummal csatoltuk a ref-et az összetevőhöz .
Most a Superherocsomópont használatával tudjuk hivatkozni this.superheroElement.current. A komponensben található changeName()függvényt a .Superherothis.superheroElement.current.changeName()
Nézzük frissítés a handleClick()funkciót a Appkomponens, hogy hívja a changeName()funkciót.
Funkciónk így handleClick()fog kinézni.
A teljes kódot megnézheti az alábbi homokozóban.
CodeSandbox
A CodeSandbox egy webalkalmazásokra szabott online szerkesztő. codeandbox.io
Most megtanultuk, hogyan frissítsük a gyermekkomponens állapotát egy szülőkomponensről? Remélem, ez hasznos volt.