Vnos sprememb v obrazec v Redux

V tej lekciji bomo končali z delom prikazovanja informacij o prodajalcu v obrazcu za dodajanje izdelka. Za to nam še preostane nekoliko spremeniti razporeditev obrazca.

Odprimo našo aplikacijo z izdelki, in v njej datoteko NewProductForm.jsx. Dodajmo pred ukazom return košček kode za razporeditev spustnega seznama, v katerem bomo izbirali prodajalca. Implementirajmo ga prek standardnega načina z map:

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

In zdaj vnesimo spremembe v samo razporeditev. Za to v obrazcu med prvim in drugim odstavkom (med blokoma razporeditve za ime in opis izdelka) vstavimo odsterek z naslednjo razporeditvijo:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Prodajalec:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Zdaj lahko zaženemo našo aplikacijo. V obrazcu za dodajanje se nam je pojavil seznam s prodajalci. Poskusimo izpolniti obrazec s podatki, izbrati enega od njih in klikniti na gumb za shranjevanje. Zdaj, če pogledamo v Redux DevTools, mi vidimo spremembe - v novem dodanem izdelku se nam je pojavila lastnost seller z id izbranega prodajalca kot vrednostjo. Prav tako se v zavihku State zdaj prikažeta dva reza products in sellers.