Řízená textová pole

Formuláře jsou způsob, jak uživatel s aplikací mluví: napíše jméno, vybere vstupenku, zaškrtne políčko. V této lekci krok za krokem postavíte formulář, kterým si návštěvník objedná vstupenky na Letní zvuky.

V kurzu JavaScriptu si text textového pole držel sám prvek a jeho value jste si přečetli, když jste ho potřebovali. V Reactu je text textového pole ve stavu, stejně jako všechno ostatní, co se na stránce mění. Textové pole ukazuje stav a každá klávesa, kterou uživatel stiskne, stav změní:

import { useState } from "react";

export default function App() {
    const [jmeno, setJmeno] = useState("");

    return (
        <main>
            <label htmlFor="jmeno">Vaše jméno</label>
            <input
                id="jmeno"
                value={jmeno}
                onChange={(event) => setJmeno(event.target.value)}
            />
            <p>Ahoj, {jmeno}!</p>
        </main>
    );
}

Když uživatel napíše A, stane se tohle:

1. Textové pole dostane událost a React zavolá onChange. event.target.value znáte z lekce Události: je to text v textovém poli, teď "A".
2. setJmeno("A") změní stav a React komponentu App znovu vykreslí.
3. V novém vykreslení je v jmeno hodnota "A", takže textové pole ukáže A a pozdrav pod ním taky.

Textovému poli, jehož text takhle pochází ze stavu, se říká řízené textové pole: jeho value je vždy to, co říká stav. To vám dává dvě věci. Stránka může ukazovat, co uživatel píše, už během psaní, a to kdekoli, nejen v textovém poli. A váš kód může text v textovém poli změnit: setJmeno("") ho vyprázdní, žádný querySelector není potřeba.

Typická chyba:

• useState() bez počáteční hodnoty. Textové pole pak začne s undefined, a React ho proto bere jako textové pole, které neřídí. Jakmile začnete psát, konzole ukáže varování A component is changing an uncontrolled input to be controlled. Stav textového pole začínejte na "", prázdném textu.