Унясенне зменаў у форму ў Redux

На гэтым заняцці мы скончым работу па вываду інфармацыі пра прадаўца ў форме для дадання прадукту. Для гэтага нам засталося крыху змяніць вёрстку формы.

Адкрыем наша прыкладанне з прадуктамі, а ў ім файл NewProductForm.jsx. Давайце перад камандай return дадамо кавалачак кода для вёрсткi выпадаючага спісу, у якім мы будзем выбіраць прадаўца. Рэалізуем яго праз стандартны спосаб з map:

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

І цяпер унясем змены ў самую вёрстку. Для гэтага ў форме паміж першым і другім абзацамі (паміж блокамі вёрсткі для назвы і апісання прадукту) уставім абзац са следуючай вёрсткай:

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

Цяпер мы можам запусціць наша прыкладанне. У форме для дадання ў нас з'явіўся спіс з прадаўцамі. Паспрабуем запоўніць форму дадзенымі, выбраць аднаго з іх і клікнуць па кнопцы захавання. Цяпер, калі мы зазірнем у Redux DevTools, мы ўбачым змены - у новым дададзеным прадукце ў нас з'явілася ўласцівасць seller з id абранага прадаўца ў якасці значэння. Таксама ва ўкладцы State цяпер адлюстроўваецца два слайсы products і sellers.