Ebben a kezdő React bemutatóban kvíz alkalmazást fogunk építeni. Dolgozunk összetett állapotobjektumokkal, a különböző állapothorgok kezelésével és a dolgok állapot alapján történő megjelenítésével.
Nézd meg:
Próbáld ki magad
Ha először magának szeretne menni, íme a forgatókönyv (az alábbi indító kódot is megragadhatja):
- Amikor a felhasználó egy gombra kattint, megjelenik a következő kérdés
- Ha a felhasználó helyesnek találja a kérdést, növelnie kell a pontszámát
- Amikor a felhasználó a kvíz végére ér, meg kell jeleníteni a teljes pontszámát
Videók áttekintése
Kezdő kód
Fogd át itt a GitHubon.
Gyerünk!
Ha megnyitja a starter kódot, és menjen App.js , látni fogod, adtam egy listát kérdések / válaszok, tárolásra nevű tömbben kérdésekre . Ez a mi vetélkedőnk.
Első célunk, hogy a kérdés adatait vegyük a tömbből, és megjelenítsük a képernyőn.
Eltávolítjuk a keményen kódolt szöveget, és egyelőre átvesszük az első kérdés adatait, csak a dolgok elindítása érdekében. Később aggódunk a kérdések váltása miatt.
A JSX-ben távolítsa el a keményen kódolt kérdés szövegét és típusát, {questions[0]}hogy megkapja a kérdéstömb első elemét (vagy kérdését).
{questions[0]} A kérdés és a válaszok megadása
Az első kérdés egy objektum, így a „dot jelöléssel” hozzáférhetünk a tulajdonságokhoz. Most csak annyit teszünk {question[0].questionText}, hogy hozzáférjünk az objektum kérdésszövegéhez:
{questions[0].questionText} Mentse és futtassa az alkalmazást. Figyelje meg, hogyan frissül a szöveg. Ne feledje, hogy csak az első kérdés szövegét vesszük a kérdéstömb első objektumától.
Hasonló megközelítést alkalmazunk a válaszlehetőségekre. Távolítsa el a kemény kódolású gombokat, és a térkép funkcióval áttekintjük az adott kérdésre adott válaszlehetőségeket.
Ne feledje, hogy a térképfüggvény a tömb felett hurkol, és megadja nekünk az aktuális elemet, amelyen a hurok éppen van, egy változó formájában.
Cserélje ki a "answer-section" div szót a következővel:
{questions[0].answerOptions.map((answerOption, index) => ( {answerOption.answerText} ))} Mentse és futtassa az alkalmazást. Figyelje meg, hogyan jelenik meg négy válasz gomb, és a szöveg dinamikusan jelenik meg.
Összefoglaljuk:
- Az első kérdést a kérdések tömbjéből kapjuk:
questions[0] - Az első kérdés egy objektum, amely egy tömböt tartalmaz
answerOptions. Ehhez a tömbhöz a dot jelölés használatával juthatunk:questions[0].answerOptions - Mivel az
answerOptionsegy tömb, ezt áttekinthetjük:questions[0].answerOptions.map - A térkép funkcióban mindegyikhez megjelenítünk egy gombot
answerOption, és megjelenítjük a szöveget
Kérdések megváltoztatása állapot használatával
Most menjünk vissza a JSX-be. Figyeljük meg, hogy ha megváltoztatjuk questions[0]a questions[1], vagy questions[2]az UI frissíti. Ez azért van, mert az index függvényében veszi fel a kérdéstömb különböző kérdéseinek adatait.
Azt szeretnénk megtenni, hogy egy állapotobjektum segítségével megtartjuk, melyik kérdésen van jelenleg a felhasználó, és frissítsük ezt, amikor a válasz gombra kattintunk. Ezt a kód futtatásából láthatja az utolsó példában.
Folytassa, és adjon hozzá egy állapotobjektumot, amely megtartja a felhasználó aktuális kérdésszámát . Ezt 0-ra inicializáljuk, így a kvíz az első kérdést veszi fel a tömbből:
const [currentQuestion, setCurrentQuestion] = useState(0); Most ezzel a változóval szeretnénk lecserélni a JSX-ben a keményen kódolt „0” -t. Először a kérdés szövegéhez:
{questions[currentQuestion].questionText} És a kérdés szakaszra is:
{questions[currentQuestion].answerOptions.map((answerOption, index) => ( {answerOption.answerText} ))} Most, ha inicializálja az currentQuestion- t 0-tól eltérő értékre , például 1-re vagy 2-re, a felhasználói felület frissül, hogy megjelenítse a kérdést és az adott kérdésre adott válaszokat. Elég jó!
Adjunk hozzá egy kis kódot, hogy amikor rákattintunk egy válaszra, növeljük a currentQuestion értéket, hogy a következő kérdésre térjünk át.
Hozzon létre egy új függvényt, amelynek neve: handAnswerButtonClick . Ezt fogják hívni, amikor a felhasználó rákattint egy válaszra.
Fogjuk eggyel növelni az aktuális kérdés értékét, menteni egy új változóba, és ezt az új változót állapotba állítani:
const handleAnswerButtonClick = (answerOption) => { const nextQuestion = currentQuestion + 1; setCurrentQuestion(nextQuestion); }; Ezután adjon hozzá egy onClick eseményt a gombunkhoz, így:
handleAnswerButtonClick()}>{answerOption.answerText} Ha megpróbáljuk ezt, látni fogja, hogy működik, amíg a végére nem érünk:
Szóval mi történik? Nos, a handAnswerButtonClick függvényünkben növeljük a számot, és állapotra állítjuk. Rendben van.
De ne feledje, hogy ezt a számot egy tömb elérésére használjuk, hogy megkaphassuk a kérdés és a válasz lehetőségeit. Amint eljutunk az 5-re, megtörik, mivel nincs 5. elem!
Ellenőrizzük, hogy nem lépjük-e túl a határt. A handAnswerButtonClick függvényünkben adjuk hozzá a következő feltételt:
if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { alert('you reached the end of the quiz'); } Ez alapvetően azt mondja, hogy ha a következő kérdés száma kisebb, mint az összes kérdés száma, frissítse az állapotot a következő kérdésre. Egyébként a kvíz végéhez érkeztünk, ezért egyelőre mutasson riasztást.
A pontszám képernyő megjelenítése
Ahelyett, hogy riasztást jelenítenénk meg, meg kell mutatnunk a „pontszám” képernyőt.
Ha megnézzük a JSX-t, akkor észreveszi, hogy ide helyeztem el a jelölést, csak a „hamis” szót kell cserélnünk a logikára.
Szóval, hogy járunk el? Nos, ezt tökéletes állapotba hozni!
Adjon hozzá egy másik állapotobjektumot, amely tárolja, hogy szeretnénk-e megjeleníteni a pontszám képernyőt, vagy sem:
const [showScore, setShowScore] = useState(false); És cserélje falseki showScorea következőre a JSX-ben:
{showScore ? // ... score section markup : // ... quiz question/answer markup} Semmi sem változik, de ha az állapotértéket igazra változtatjuk, akkor a div pontszám jelenik meg. Ez azért van, mert minden egy három részbe van csomagolva, vagyis:
"Ha a showScore igaz, akkor tegye a pontszám szakasz jelölését, különben tegye vissza a kvíz kérdés / válasz jelölését"
Most szeretnénk frissíteni ezt az állapotváltozót, amikor a felhasználó elérte a kvíz végét. Ennek logikáját már megírtuk a handleAnswerButtonClick függvényünkben.
Csak annyit kell tennünk, hogy lecseréljük a showScore változót igazra frissítő riasztási logikát :
if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { setShowScore(true); } Ha rákattintunk a vetélkedő válaszaira, akkor megjelenik a pontszám szakasz, amikor a végére érünk. Jelenleg a bemutatott szöveg és pontszám kemény kódolású karakterlánc, ezért dinamikussá kell tennünk.
A pontszám mentése
A következő feladatunk az, hogy pontszámot tartsunk valahol az alkalmazásunkban, és növeljük ezt az értéket, ha a felhasználó a megfelelő opciót választja.
Ennek logikus helye a „handleAnswerOptonClick” függvényen belül található.
Ne feledje, amikor iterálunk az answerOptions felett, a térképfüggvény mindegyikhez ad egy objektumot, amely tartalmazza a questionText-et , és egy logikai értéket, amely megmutatja, hogy a válasz helyes-e vagy sem. Ezt a logikai értéket fogjuk használni, hogy növeljük a pontszámunkat.
Gombunkban frissítse a funkciót így:
onClick={()=> handleAnswerButtonClick(answerOption.isCorrect) Ezután frissítse a függvényt a paraméter elfogadásához:
const handleAnswerButtonClick = (isCorrect) => { //... other code }; Most hozzáadhatunk némi logikát a funkciónkhoz. Most azt akarjuk mondani, hogy „ha az isCorrect igaz, akkor figyelmeztetést akarunk mutatni”:
const handleAnswerButtonClick = (isCorrect) => { if (isCorrect) { alert(“the answer is correct!”) } //...other code }; Ez ugyanaz if(isCorrect === true), mint egy gyorsírás. Most, ha megpróbáljuk, látni fogja, hogy riasztást kapunk, amikor a helyes válaszra kattintunk.
Csak összefoglalva eddig:
- Amikor a gombok felett iterálunk , átadjuk a
isCorrectgomb logikai értékét a handleAnswerButtonClick függvénynek - A függvényben ellenőrizzük, hogy ez az érték igaz-e, és riasztást mutatunk, ha igen.
Ezután meg akarjuk menteni a pontszámot. Mit gondolsz, hogyan csináljuk ezt? Ha állami értéket mondtál, akkor igazad van!
Folytassa, és adjon hozzá egy másik „érték” nevű állapotértéket. Ne felejtse el előtagolni a függvényt, hogy megváltoztassa az értéket a „set” értékkel, így setScore lesz. Inicializálja 0:
const [score, setScore] = useState(0); Ezután riasztás megjelenítése helyett 1-vel szeretnénk frissíteni pontszámunkat, ha a felhasználó helyes választ kap.
A handAnswerButtonClick függvényünkben távolítsa el a figyelmeztetést, és növelje eggyel a pontszámunkat:
const handleAnswerButtonClick = (isCorrect) => { if (answerOption.isCorrect) { setScore(score + 1); } //...other code }; A pontszám megjelenítése
A pontszám megjelenítéséhez csak egy kis változtatást kell végrehajtanunk a megjelenítési kódon. A JSX-ben távolítsa el a keménykódolt karakterláncot a pontszám szakaszból, és adja hozzá ezt az új változót:
You scored {score} out of {questions.length} You scored {score} out of {questions.length} Ha átfutjuk a válaszokat, a pontszám dinamikus és a végén helyesen jelenik meg!
Még egy utolsó dolog, mielőtt befejeznénk a kvízalkalmazásunkat: észreveszi, hogy a felhasználói felületen megjelenő aktuális kérdés mindig „1”, mivel kemény kódolású. Ezen változtatnunk kell, hogy dinamikusabbak legyünk.
Cserélje ki a "kérdésszám" szöveget a következővel:
Question {currentQuestionIndex + 1}/{questions.length} Ne feledje, hogy szükségünk van a +1-re, mivel a számítógépek 0-tól és nem 1-től kezdenek számolni.
Szeretne több projektötletet?
Miért ne próbálna meg néhány React-projektet felépíteni a tanulás további fokozása érdekében? Minden héten küldök egy új projektet az Ön számára, hogy kipróbálhasson egy működő példát, kezdőkódot és tippeket. Iratkozzon fel, hogy ezt egyenesen a postaládájába juttassa!