Muudatuste tegemine vormis Reduxis

Sellel tunnil lõpetame töö müüja teabe kuvamisega vormis toode lisamiseks. Selleks on meil jäänud vormi veidi muuta.

Avame oma toodetega rakenduse, ja selles faili NewProductForm.jsx. Lisame enne return käsku koodijupi rippmenüü jaoks, kus me valime müüja. Rakendame selle läbi standardsel viisil map-iga:

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

Ja nüüd teeme muudatused vormi enda jaoks. Selleks vormis esimese ja teise lõigu vahel (blokkide vahel toote nime ja kirjelduse jaoks) sisestame lõigu järgmise kujundusega:

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

Nüüd saame käivitada oma rakenduse. Lisamise vormis on meil ilmunud müüjate loend. Proovime vormi täita andmetega, valida ühe neist ja klikkida salvestamise nupul. Nüüd, kui vaatame Redux DevTools-i, näeme muudatusi - uues lisatud toodes on meil ilmunud omadus seller koos valitud müüja id-ga väärtusena. Samuti kuvab vahekaart State nüüd kahte lõiku products ja sellers.

Avage oma õpilastega rakendus. Failis NewStudentForm.jsx looge rippmenüü teachersList koos map abil, kus on õppejõudude ees- ja perekonnanimed, nagu näidatud tunnis.

Tehke muudatused kujunduses, lisades veel ühe bloki õppejõudude rippmenüü kuvamiseks.

Käivitage oma rakendus. Vormis õpilase lisamiseks peaks teile ilmuma õppejõudude rippmenüü, mille tegite eelmistes ülesannetes.