Shrnutí

V této lekci jste se naučili, že:

• Řízené textové pole ukazuje, co je ve stavu, value={jmeno}, a jeho onChange stav mění: onChange={(event) => setJmeno(event.target.value)}. Stránka tak může ukazovat, co uživatel píše, už během psaní, a setJmeno("") textové pole vyprázdní.
• Prvek formuláře s value potřebuje onChange. Bez něj ho React drží tak, jak říká stav, takže do něj nejde psát, a React na to upozorní v konzoli.
• textarea dostane value stejně jako input. value prvku select je value jeho vybrané možnosti a vybírá ji stav.
• Zaškrtávací políčko se řídí atributem checked a jeho nový stav je event.target.checked, true, nebo false.
• Hodnota textového pole je text, i s type="number". Ve stavu mějte text a tam, kde počítáte, použijte Number(). Prázdné textové pole je tam 0.
• <form onSubmit={rezervuj}> spustí obsluhu, když se formulář odešle, tlačítkem nebo Enterem. Jako první zavolejte event.preventDefault(), jinak se stránka načte znovu a všechen stav zmizí.
• Přidání z formuláře: aktualizační funkce vytvoří nové pole s novou položkou, setVeci((veci) => [...veci, { id: Date.now(), text: text }]), a pak se textové pole vyprázdní.
• Obsluha zkontroluje, co uživatel napsal, a když něco nesedí, nastaví chybovou zprávu ve stavu a skončí předčasným návratem (return). disabled={text.trim() === ""} vypne tlačítko, dokud podmínka platí.

V další lekci, Miniprojekt: Kvízová hra, využijete stav, události a podmínky ve vlastní hře: otázka, tlačítka s odpověďmi, skóre a obrazovka na konci.

Nejdřív si ale vše procvičte na objednávce festivalového trička. App.jsx už má formulář, jen zatím žádný stav.