A változtatások végrehajtása a Redux űrlapban

Ezen az órán befejezzük munkánkat az eladó adatainak megjelenítésére az új termék hozzáadására szolgáló űrlapban. Ehhez már csak kicsit kell módosítanunk az űrlap megjelenésén.

Nyissuk meg a termékalkalmazásunkat, és benne a NewProductForm.jsx fájlt. Adjunk hozzá a return parancs elé egy kódrészletet a legördülő lista megjelenítéséhez, ahol kiválasztjuk az eladót. Valósítsuk meg a szabványos map módszerrel:

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

És most végezzük el a módosításokat magán a megjelenésen. Ehhez az űrlapban az első és a második bekezdés között (a termék nevének és leírásának megjelenési blokkja között) illesszünk be egy bekezdést a következő megjelenéssel:

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

Most elindíthatjuk alkalmazásunkat. Az új termék hozzáadására szolgáló űrlapban megjelent egy legördülő lista az eladókkal. Próbáljuk meg kitölteni az űrlapot adatokkal, kiválasztani egy eladót és rákattintani a mentés gombra. Most, ha megnézzük a Redux DevTools-ot, mi változásokat fogunk látni - az újonnan hozzáadott termékben megjelent egy seller tulajdonság a kiválasztott eladó azonosítójával, mint érték. A State fülön mostantól két slice jelenik meg: a products és a sellers.

Nyissa meg a diákokkal kapcsolatos alkalmazását. A NewStudentForm.jsx fájlban hozzon létre egy teachersList legördülő listát a map segítségével, amelyben az oktatók teljes neve fog szerepelni, ahogyan az az órán is bemutatásra került.

Végezze el a módosításokat a megjelenésben egy további blokk hozzáadásával a legördülő oktatói lista megjelenítéséhez.

Indítsa el alkalmazását. Az új diák hozzáadására szolgáló űrlapban meg kell jelennie egy legördülő listának az oktatókkal, amelyet az előző feladatokban készített.