Vykonávanie zmien vo formulári v Reduxe

V tejto lekcii dokončíme prácu na zobrazovaní informácií o predajcovi vo formulári na pridanie produktu. Na to nám ostáva len mierne upraviť vzhľad formulára.

Otvorme našu aplikáciu s produktmi, a v nej súbor NewProductForm.jsx. Pridajme pred príkaz return kúsok kódu pre vzhľad rozbaľovacieho zoznamu, v ktorom budeme vyberať predajcu. Realizujme ho pomocou štandardného spôsobu s map:

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

A teraz vykonajme zmeny v samotnom vzhľade. Na to vo formulári medzi prvým a druhým odsekom (medzi blokmi vzhľadu pre názov a popis produktu) vložme odsek s nasledujúcim vzhľadom:

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

Teraz môžeme spustiť našu aplikáciu. Vo formulári na pridanie sa nám objavil zoznam s predajcami. Skúsme vyplniť formulár údajmi, vybrať jedného z nich a kliknúť na tlačidlo uloženia. Teraz, ak sa pozrieme do Redux DevTools, uvidíme zmeny - v novom pridanom produkte sa nám objavila vlastnosť seller s id vybraného predajcu ako hodnotou. Tiež na karte State sa teraz zobrazujú dva slice products a sellers.

Otvorte vašu aplikáciu so študentmi. V súbore NewStudentForm.jsx vytvorte rozbaľovací zoznam teachersList s pomocou map, v ktorom budú mená učiteľov, ako je ukázané v lekcii.

Vykonajte zmeny vo vzhľade, pridaním ďalšieho bloku pre výpis rozbaľovacieho zoznamu s učiteľmi.

Spustite vašu aplikáciu. Vo formulári na pridanie študenta sa vám musí objaviť rozbaľovací zoznam s učiteľmi, ktorý ste robili v predchádzajúcich úlohách.