Přidávání položek z formuláře

Formuláře často něco přidávají do seznamu: komentář, úkol, věc, kterou si sbalit. Obě poloviny už znáte. Co uživatel napsal, je ve stavu řízeného textového pole, a jak přidat položku do pole ve stavu, víte z lekce Stav: aktualizační funkcí, která vytvoří nové pole pomocí tří teček. Obsluha formuláře obojí spojí:

function pridejPrani(event) {
    event.preventDefault();
    setPrani((prani) => [...prani, { id: Date.now(), kapela: kapela }]);
    setKapela("");
}

To je z formuláře, ve kterém fanoušci navrhují kapely na příští rok. Nové přání přijde na konec nového pole a dostane id pro svůj key. Date.now() je počet milisekund od začátku roku 1970, takže pokaždé, když někdo přidá přání, je to jiné číslo, a jako id to tady stačí. Pak setKapela("") textové pole vyprázdní, aby šlo hned psát další kapelu. U řízeného textového pole je vyprázdnění jen změna jeho stavu.

Prázdné přání nedává smysl, takže tlačítko nemá fungovat, dokud je textové pole prázdné. Atribut disabled (vypnuté) dostane podmínku:

<button type="submit" disabled={kapela.trim() === ""}>
    Navrhnout
</button>

Dokud podmínka platí, je tlačítko vypnuté: je bledší a kliknutí na něj nic neudělá. Když jsou v textovém poli jen mezery, dá trim() hodnotu "", takže zůstane vypnuté. Formulář, jehož tlačítko pro odeslání je vypnuté, nejde odeslat ani Enterem. A protože každé vykreslení podmínku spočítá ze stavu znovu, tlačítko ožije s prvním napsaným písmenem.