Reduxда формага ўзгартиришлар киритиш

Бу машғулотда биз маҳсулот қўшиш учун формада сотувчи ҳақида маълумот чиқариш бўйича ишни тугатамиз. Бунинг учун бизга форманинг версткасини озгина ўзгартириш қолди.

Маҳсулотлар билан ишлайдиган илованимизни ochamiz, ундаги NewProductForm.jsx файлини ochamiz. Келинг return buyrugʻi олдига верстканинг бир бўлагини қўшайлик читдиргич рўйхат учун, унда биз сотувчини танлаймиз. Уни амалга оширамиз стандарт 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 кўрсатилмокда.

Студентлар билан ишлайдиган илованингизни oching. NewStudentForm.jsx файлида читдиргич рўйхат teachersList яратинг map ёрдамида, унда ўқитувчиларнинг ФИО си бўлади, дарсда кўрсатилганидек.

Версткага ўзгартиришлар киритиб, янги блок қўшинг, читдиргич рўйхатни чиқариш учун ўқитувчилар билан.

Илованингизни ишга туширинг. Қўшиш учун студент формасида сизда ўқитувчилар билан читдиргич рўйхат пайдо бўлиши керак, уни сиз олдинги вазифаларда ясагандингиз.