Reduxтеги формага өзгөртүүлөрдү киргизүү

Бул сабакта биз продукт кошуу формасында сатуучу жөнүндө маалыматты чыгаруу боюнча иштерди аяктайбыз. Бул үчүн бизге форманын версткасын бир аз өзгөртүү калды.

Продукттар менен болгон колдонмобузду ачалы, анын ичиндеги NewProductForm.jsx файлын. Келгиле return командасынын алдына сатуучуну тандай турган төмөндөө тизмесинин версткасы үчүн коддун бир бөлүгүн кошолу. Аны map менен стандарттуу жол аркылуу ишке ашыралы:

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

Эми өзгөртүүлөрдү верстканын өзүнө киргизели. Бул үчүн форманын биринчи жана экинчи абзацтарынын ортосунда (продукттун аталышы жана сүрөттөмөсү үчүн верстка блокторунун ортосунда) төмөнкү верстка менен абзацты кошолу:

<p>
	<label htmlFor="prodSeller">Сатуучу:</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 жардамы менен, анын ичинде окутуучулардын аты-жөнү сабакта көрсөтүлгөндөй болсун.

Өзгөртүүлөрдү версткага киргизиңиз, кошуп дагы бир блокту төмөндөө тизмесин чыгаруу үчүн окутуучулар менен.

Колдонмонузду иштетиңиз. Кошуу формасында студент үчүн сизде окутуучулар менен төмөндөө тизмеси пайда болушу керек, ал мурунку тапшырмаларда жасаган.