Reduxda shaklni o'zgartirish
Ushbu mashg'ulotda biz mahsulot qo'shish shaklida sotuvchi haqida ma'lumot chiqarish bo'yicha ishni tugatamiz. Buning uchun shakl vertikasini biroz o'zgartirish qoldi.
Mahsulotlar bilan bog'liq ilovamizni ochamiz,
uning ichidagi NewProductForm.jsx faylini ochamiz.
Keling, return buyrug'idan oldin
sotuvchini tanlaydigan ochiladigan ro'yxat
vertikasi uchun kod qismini qo'shamiz.
Uni map yordamida standart usulda amalga oshiramiz:
const sellersList = sellers.map((seller) => (
<option key={seller.id} value={seller.id}>
{seller.name}
</option>
))
Endi esa vertikani o'zini o'zgartirishlar kiritamiz. Buning uchun shaklda birinchi va ikkinchi abzatslar orasiga (mahsulot nomi va tavsifi uchun vertika bloklari orasiga) quyidagi vertikaga ega bo'lgan abzatsni qo'shamiz:
<p>
<label htmlFor="prodSeller">Sotuvchi:</label>
<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
<option value=""></option>
{sellersList}
</select>
</p>
Hozir ilovamizni ishga tushirishimiz mumkin.
Qo'shish shaklida sotuvchilar bilan ro'yxat paydo bo'ldi.
Keling, shakl ma'lumotlar bilan to'ldirib, ulardan birini tanlab,
saqlash tugmasini bosamiz. Endi,
agar biz Redux DevTools-ni ochsak, biz
o'zgarishlarni ko'ramiz - yangi qo'shilgan
mahsulotda bizda seller xususiyati paydo bo'ldi
qiymat sifatida tanlangan sotuvchining id-si bilan.
Shuningdek, State yorlig'ida endi ikkita slays ko'rsatiladi
products va sellers.
Talabalar bilan bog'liq ilovangizni oching.
NewStudentForm.jsx faylida yarating
ochiladigan ro'yxat teachersList
map yordamida, unda o'qituvchilarning
FISHlari bo'ladi, darsda ko'rsatilganidek.
Vertikaga o'zgartirishlar kiriting, qo'shib ochiladigan ro'yxatni chiqarish uchun yana bir blok.
Ilovangizni ishga tushiring. Qo'shish shaklida talaba uchun sizda oldingi vazifalarda qilgan o'qituvchilar bilan ochiladigan ro'yxat paydo bo'lishi kerak.