Odeslání formuláře

Zatím stránka jen ukazovala, co uživatel napsal. Aby si vstupenky zarezervoval, formulář odešle. Stejně jako v kurzu JavaScriptu patří prvky formuláře do prvku form s tlačítkem pro odeslání a v Reactu dostane formulář onSubmit:

import { useState } from "react";

export default function App() {
    const [email, setEmail] = useState("");
    const [prihlaseno, setPrihlaseno] = useState(false);

    function prihlas(event) {
        event.preventDefault();
        setPrihlaseno(true);
    }

    return (
        <main>
            <form onSubmit={prihlas}>
                <label htmlFor="email">E-mail</label>
                <input
                    id="email"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                />
                <button type="submit">Přihlásit se</button>
            </form>
            {prihlaseno && <p>Děkujeme! Budeme psát na {email}.</p>}
        </main>
    );
}

React zavolá onSubmit, když se formulář odešle, tlačítkem nebo Enterem v některém z jeho textových polí. A stejně jako v kurzu JavaScriptu pak prohlížeč udělá svou výchozí akci: pošle vyplněné údaje na server a načte stránku znovu. Pro aplikaci v Reactu to znamená začít úplně od začátku: každá stavová proměnná má zase svou počáteční hodnotu. Vyzkoušejte si to v náhledu tohoto cvičení, než začnete: napište jméno a klikněte na Rezervovat. Stránka se načte znovu a textové pole je prázdné. event.preventDefault() prohlížeč zastaví, a tak ho v obsluze zavolejte jako první.

Obsluha nemusí textová pole číst: co uživatel napsal, už je ve stavu, tady v email. Jen rozhodne, co se stane, a tady si do stavu zapamatuje, že se uživatel přihlásil.

Formulář, který svou práci udělal, často uvolní místo zprávě. To zařídí předčasný návrat (return) z lekce Seznamy a podmínky: s if (prihlaseno) před return s formulářem vrátí komponenta jen zprávu a formulář se vůbec nevykreslí.

Typická chyba:

• event.preventDefault; bez závorek metodu nezavolá, takže se stránka znovu načte.