Bună ziua tuturor. Astăzi vom vorbi despre tipurile de date la React. Am 2 REACT tip de date - l recuzită și de stat. În această lecție vom discuta despre ceea ce statul locale și cum să-l folosească pentru a reacționa.
Dacă aveți nevoie pentru a schimba ceea ce are loc numai în componente specifice, este întotdeauna în valoare cu ajutorul statului local.
Să încercăm. Și primul lucru pe care o vom să-l realizeze un meniu drop-down.
Să creeze o nouă Dropdown.js de componente
Acum, avem nevoie de această componentă în zaimportit App.js și afișare.
Trebuie să ne amintim mereu de 2 lucruri:
- Dacă vrem să se întoarcă la metoda face a fost nevoie de mai multe linii pentru a încheia tot ceea ce ne dorim să se întoarcă în paranteze.
- Retur poate fi întotdeauna doar 1 yelement. Asta este, nu se poate scrie o diva de 2 la același nivel. Pentru ca acest lucru să funcționeze, va trebui să le înveliți înapoi în 1 div.
În browser-ul dvs., putem vedea că componenta noastră este adus pe ecran.
Să adăugăm o variabilă statului atunci când componenta este inițializat. Pentru a face acest lucru, pur și simplu adăugați un constructor clasei.
Nu trebuie să uităm să apelați metoda super-inițializarea, deoarece prioritari constructor, nu trebuie să rupă aplicația. Aici, atunci când se creează o componentă în timpul inițializării variabilă isOpened în statul și setat la fals;
Să adăugați evenimentul onClick, iar metoda care va tuglit isOpened variabilă
Vă rugăm să rețineți că metoda onClick este trecut fără un apel, și anume, fără paranteze, în caz contrar acesta va fi numit imediat.
În toggleState noi numim setState, care ne permite să schimbe statului.
În consola, putem vedea că implicit isOpened = false. Dacă facem clic pe text, vom vedea o eroare
Acest lucru se întâmplă pentru că this.toggleState funcție nu este numit în contextul clasă și deci acest lucru este nedefinit.
Pentru a face codul nostru să lucreze, să-l pribindim la acest
După cum putem vedea în consola acum valoarea este schimbat atunci când faceți clic pe bloc.
Să schimbăm aspectul, astfel încât am făcut să apară pe unitatea de clic.
Aici am CETIM valoare dropdownText variabilă atunci când ne isOpened = true. Și variabile de ieșire în acolade.
După cum putem vedea în browser-ul avem un ascuns și faceți clic pe bloc.