Reagál - Helyi állapot
Hello mindenkinek. Ma fogunk beszélni az adattípusok reagálni. Nekem van 2 REACT adattípus - ez kellékek és az állam. Ebben a leckében lesz szó, amit a helyi állami és hogyan kell használni, hogy reagáljon.
Ha meg kell változtatni, mi zajlik csak a meghatározott összetevők, mindig érdemes a helyi államnak.
Próbáljuk. És az első dolog, mi fog jönni, hogy ez egy legördülő menüből.
Hozzunk létre egy új komponenst Dropdown.js
Most arra van szükség ennek az összetevőnek zaimportit App.js és a kijelző.
Mi mindig emlékezni 2 dolgot:
- Ha azt akarjuk, hogy visszatérjen a render módszer többsoros szükségességét, hogy lezárja mindent, amit akar visszatérni zárójelben.
- Vissza lehet mindig csak 1 yelement. Vagyis azt, hogy nem lehet írni egy díva 2 ugyanazon a szinten. Ehhez a munkához kell majd csomagolja vissza 1 div.
Az Ön böngészőjében, kiderül, hogy a komponens hozta a képernyőn.
Adjunk hozzá egy változót az állam, ha az alkatrész megindul. Ehhez egyszerűen adjunk hozzá egy kivitelező az osztályban.
Nem szabad elfelejteni, hogy hívja a módszer szuper inicializálási mert felülírja a kivitelező, akkor nem kell törni a kérelmet. Itt, ha egy komponens jön létre az inicializálás során változó isOpened az állam, és állítsa false;
Adjuk hozzá a onClick esemény, és az eljárás, amely tuglit isOpened változó
Felhívjuk figyelmét, hogy a onClick módszer nélkül telt el a hívás, azaz a zárójelek nélkül, máskülönben azonnal hívja.
A toggleState hívjuk a setState, amely lehetővé teszi számunkra, hogy változtatni az állam.
A konzol, láthatjuk, hogy az alapértelmezett isOpened = false. Ha rákattintunk a szöveget, azt látjuk, hiba
Ez azért történik, mert this.toggleState funkció nem hívják keretében osztály és így ez nem definiált.
Ahhoz, hogy a kódot dolgozni, nézzük pribindim, hogy ezen a
Amint látjuk a konzol most az értéke megváltozik, ha rákattint a blokk.
Változtassuk meg a nézetet, hogy az akkor még megjelenik az egység kattintással.
Itt CETIM változó dropdownText érték amikor isOpened = true. És kimeneti változók zárójelek.
Mint látható a böngészőben van egy rejtett és kattintson blokk.