Göra ändringar i formuläret i Redux

I den här lektionen kommer vi att avsluta arbetet med att visa information om säljaren i formuläret för att lägga till en produkt. För att göra detta återstår det för oss att ändra formulärets utseende lite grann.

Låt oss öppna vår produktapplikation, och i den filen NewProductForm.jsx. Låt oss lägga till en bit kod för utseendet på en rullgardinsmeny, där vi kan välja säljare, före kommandot return. Vi implementerar den med standardmetoden med map:

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

Och nu gör vi ändringar i själva utseendet. För att göra detta, lägger vi till ett stycke med följande utseende i formuläret mellan det första och det andra stycket (mellan utseendeblocken för produktnamnet och produktbeskrivningen):

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

Nu kan vi starta vår applikation. I formuläret för att lägga till har vi fått en lista med säljare. Låt oss försöka fylla i formuläret med data, välja en av dem och klicka på spara-knappen. Nu, om vi tittar i Redux DevTools, kommer vi se ändringarna - i den nylagda produkten har vår egenskap seller med id för den valda säljaren som värde. På fliken State visas nu två skivor products och sellers.

Öppna din studentapplikation. I filen NewStudentForm.jsx, skapa en rullgardinsmeny teachersList med hjälp av map, där lärarnas fullständiga namn kommer att finnas, som visas i lektionen.

Gör ändringar i utseendet genom att lägga till ytterligare ett block för att visa en rullgardinsmeny med lärare.

Starta din applikation. I formuläret för att lägga till en student bör du ha fått en rullgardinsmeny med lärare, som du gjorde i de tidigare uppgifterna.