Внесение изменений в форму в Redux
На этом занятии мы закончим работу по выводу информации о продавце в форме для добавления продукта. Для этого нам осталось немного изменить верстку формы.
Откроем наше приложение с продуктами,
а в нем файл NewProductForm.jsx. Давайте
перед командой return добавим кусочек кода
для верстки выпадающего списка, в котором
мы будем выбирать продавца. Реализуем его через
стандартный способ с map:
const sellersList = sellers.map((seller) => (
<option key={seller.id} value={seller.id}>
{seller.name}
</option>
))
И теперь внесем изменения в саму верстку. Для этого в форме между первым и вторым абзацами (между блоками верстки для названия и описания продукта) вставим абзац со следующей версткой:
<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.
Откройте ваше приложение со студентами.
В файле NewStudentForm.jsx создайте
выпадающий список teachersList с
помощью map, в котором будут ФИО
преподавателей, как показано в уроке.
Внесите изменения в верстку, добавив еще один блок для вывода выпадающего списка с преподавателями.
Запустите ваше приложение. В форме для добавления студента у вас должен появиться выпадающий список с преподавателями, который вы делали в предыдущих задачах.