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:

products/NewProductForm.jsxconst 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):

products/NewProductForm.jsx<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.