Implementering af formularændringer i Redux

I denne lektion afslutter vi arbejdet med at vise oplysninger om sælgeren i formularen til tilføjelse af produkter. For at gøre dette skal vi bare ændre formularlayoutet en smule.

Lad os åbne vores produktapplikation, og i den filen NewProductForm.jsx. Lad os føje en lille kode til layoutet af dropdown-menuen, hvor vi kan vælge sælger, før return kommandoen. Vi implementerer det via standardmetoden med map:

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

Og nu laver vi ændringer i selve layoutet. For at gøre dette indsætter vi et afsnit med følgende layout i formularen mellem det første og andet afsnit (mellem layoutblokkene for produktnavn og produktbeskrivelse):

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

Nu kan vi starte vores applikation. I tilføjelsesformularen har vi nu en liste over sælgere. Lad os prøve at udfylde formularen med data, vælge en af dem og klikke på gem-knappen. Nu, hvis vi kigger i Redux DevTools, vil vi se ændringerne - i det nyligt tilføjede produkt har vi en egenskab seller med id for den valgte sælger som værdi. Også under fanen State vises to slices nu products og sellers.

Åbn din studerende-applikation. I filen NewStudentForm.jsx skal du oprette en dropdown-liste teachersList med map, som vil indeholde de underviseres fulde navne, som vist i lektionen.

Foretag ændringer i layoutet ved at tilføje endnu en blok til visning af dropdown-listen med undervisere.

Start din applikation. I formularen til tilføjelse af en studerende skal du nu have en dropdown-liste med undervisere, som du lavede i de foregående opgaver.