Redux-da formany üýtgetmek

Bu sapakda biz önüm goşmak formasynda satyjylar hakynda maglumat görkezmegi tamamlaris. Bunuň üçin biz forma görnüşini birneme üýtgetmelidiris.

Önümler bilen işleýän progrannymyzy açalyň we onda NewProductForm.jsx faýlyny açalyň. Geliň, return buýrugyndan öň, biz satyjylary saýlarys açylýan sanawyň görnüşi üçin kod bölegini goşalyň. Ony map ulanyp standart usul bilen amala aşyralyň:

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

Indi özüne görnüşde üýtgeşmeler girizeris. Munuň üçin formada birinji we ikinji abzaslaryň arasynda (önümiň ady we düşündirişi üçin görnüş bloklarynyň arasynda) aşakdaky görnüşli abzasy goýaryň:

<p>
	<label htmlFor="prodSeller">Satyjy:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Indi biz programmany işledip bilýäris. Goşmak formasynda bizde satyjylaryň sanawy peýda boldy. Formany maglumatlar bilen doldurmagy, olaryň birini saýlamagy we ýatda saklamak düwmesine basmagy synaň. Indi, Redux DevTools-a göz aýlasak, üýtgeşmeleri göreris - goşulan täze önümde bizde seller hossasy, saýlanan satyjynyň id bahasy bilen, peýda boldy. Şeýle hem, State goňşasynda indi products we sellers diýen iki süýşüm görkezilýär.

Studentler bilen işleýän programmanyzy açyň. NewStudentForm.jsx faýlynda, sapakda görkezilişi ýaly, mugallymlaryň familiýasy, ady we atasynyň ady bolan teachersList açylýan sanawyny map ulanyp düzüň.

Görnüşe üýtgeşmeler giriziň, mugallymlar bilen açylýan sanawy görkezmek üçin ýene bir blok goşuň.

Programmanyzy işlediň. Student goşmak formasynda, öňki meselelerde eden mugallymlaryň açylýan sanawy peýda bolmaly.