Vnos sprememb v obrazec v Redux

V tej lekciji bomo končali z delom prikazovanja informacij o prodajalcu v obrazcu za dodajanje izdelka. Za to nam še preostane nekoliko spremeniti razporeditev obrazca.

Odprimo našo aplikacijo z izdelki, in v njej datoteko NewProductForm.jsx. Dodajmo pred ukazom return košček kode za razporeditev spustnega seznama, v katerem bomo izbirali prodajalca. Implementirajmo ga prek standardnega načina z map:

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

In zdaj vnesimo spremembe v samo razporeditev. Za to v obrazcu med prvim in drugim odstavkom (med blokoma razporeditve za ime in opis izdelka) vstavimo odsterek z naslednjo razporeditvijo:

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

Zdaj lahko zaženemo našo aplikacijo. V obrazcu za dodajanje se nam je pojavil seznam s prodajalci. Poskusimo izpolniti obrazec s podatki, izbrati enega od njih in klikniti na gumb za shranjevanje. Zdaj, če pogledamo v Redux DevTools, mi vidimo spremembe - v novem dodanem izdelku se nam je pojavila lastnost seller z id izbranega prodajalca kot vrednostjo. Prav tako se v zavihku State zdaj prikažeta dva reza products in sellers.

Odprite vašo aplikacijo s študenti. V datoteki NewStudentForm.jsx ustvarite spustni seznam teachersList z uporabo map, v katerem bodo imena učiteljev, kot je prikazano v lekciji.

Vnesite spremembe v razporeditev, tako da dodate še en blok za prikaz spustnega seznama z učitelji.

Zaženite vašo aplikacijo. V obrazcu za dodajanje študenta bi se moral pojaviti spustni seznam z učitelji, ki ste ga naredili v prejšnjih nalogah.