Vlastní slovíčka
Dvanáct slovíček je dobrý začátek, ale budete se chtít učit i vlastní. Aplikace na ně dostane formulář, samostatnou komponentu v souboru FormularSlovicka.jsx. Jeho JSX je hotové: nadpis, dvě textová pole a tlačítko. Vy ho oživíte.
Textová pole jsou řízená, jako v lekci Formuláře: to, co obsahují, je ve stavových proměnných anglicky a cesky a onChange do nich uloží každou změnu. Když se formulář odešle (tlačítkem Přidat nebo Enterem), spustí se funkce odesli. Ta nejdřív pomocí event.preventDefault() zabrání prohlížeči, aby formulář odeslal sám a znovu načetl stránku.
Kam ale nové slovíčko patří? Slovíčka jsou stav komponenty App a měnit je může jen App. Dá proto formuláři v props funkci onPridat a formulář ji s novým slovíčkem zavolá, stejně jako v lekci Sdílený stav:
onPridat({
id: Date.now(),
anglicky: anglicky.trim(),
cesky: cesky.trim(),
});Každá kartička potřebuje vlastní id, mimo jiné kvůli klíči. Dá ho Date.now() jako v lekci Formuláře: počet milisekund od začátku roku 1970 je při každém přidání slovíčka jiný. trim() odstraní mezery na začátku a na konci, kdybyste nějakou napsali omylem.
V komponentě App vytvoří funkce pridejSlovicko(noveSlovicko) nové pole slovíček s novým slovíčkem na konci: setSlovicka((slovicka) => [...slovicka, noveSlovicko]). Balíček pak má třináct kartiček a pozice i skóre tu novou započítají samy.
Formulář by měl také zkontrolovat, co jste napsali: kartička bez slovíčka nebo bez překladu je k ničemu. Když je některé textové pole prázdné, formulář nic nepřidá a místo toho napíše, co je špatně, a to pomocí vlastní stavové proměnné chyba.
Jak psát:
Pokyny
V souboru FormularSlovicka.jsx přidejte stavové proměnné anglicky a cesky (na začátku prázdné texty) a pomocí value a onChange udělejte z obou textových polí řízená. Formuláři dejte onSubmit={odesli}. Funkce odesli(event) zavolá event.preventDefault() a pak onPridat() s novým slovíčkem jako v ukázce. V App.jsx importujte FormularSlovicka, ukažte <FormularSlovicka onPridat={pridejSlovicko} /> pod tlačítky a napište funkci pridejSlovicko(noveSlovicko), která slovíčko přidá na konec slovicka. Přidejte sun s překladem slunce: pozice ukáže 1 / 13.
Po přidání slovíčka ve funkci odesli obě textová pole vyprázdněte, abyste mohli hned psát další slovíčko.
Když je některé textové pole prázdné nebo obsahuje jen mezery (anglicky.trim() === ""), nepřidávejte nic: uložte do nové stavové proměnné chyba text Vyplňte anglické i české slovíčko. a funkci odesli ukončete pomocí return. Pod tlačítko dejte <p className="chyba">{chyba}</p>, když chyba není prázdná. Když se slovíčko přidá, vyprázdněte i chyba, aby zpráva zmizela.