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.