Provádění změn ve formuláři v Reduxu

V této lekci dokončíme práci na zobrazení informací o prodejci ve formuláři pro přidání produktu. K tomu nám zbývá trochu upravit vzhled formuláře.

Otevřeme naši aplikaci s produkty, a v ní soubor NewProductForm.jsx. Pojďme před příkaz return přidat kousek kódu pro vzhled rozbalovacího seznamu, ve kterém budeme vybírat prodejce. Realizujme jej prostřednictvím standardního způsobu s map:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

A nyní provedeme změny ve vlastním vzhledu. K tomu ve formuláři mezi prvním a druhým odstavcem (mezi bloky vzhledu pro název a popis produktu) vložíme odstavec s následujícím vzhledem:

<p>
	<label htmlFor="prodSeller">Prodejce:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Nyní můžeme spustit naši aplikaci. Ve formuláři pro přidání se nám objevil seznam s prodejci. Zkusme vyplnit formulář údaji, vybrat jednoho z nich a kliknout na tlačítko uložení. Nyní, pokud nahlédneme do Redux DevTools, uvidíme změny - v nově přidaném produktu se nám objevila vlastnost seller s id vybraného prodejce jako hodnotou. Také na kartě State se nyní zobrazují dva slicy products a sellers.

Otevřete vaši aplikaci se studenty. V souboru NewStudentForm.jsx vytvořte rozbalovací seznam teachersList pomocí map, ve kterém budou jména učitelů, jak je ukázáno v lekci.

Proveďte změny ve vzhledu přidáním dalšího bloku pro výpis rozbalovacího seznamu s učiteli.

Spusťte vaši aplikaci. Ve formuláři pro přidání studenta se vám musí objevit rozbalovací seznam s učiteli, který jste dělali v předchozích úkolech.