Дар 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 эҷод кунед, ки дар он ФИО-и муаллимон бошад, тавре ки дар дарс нишон дода шуд.

Таѓйиротро дар верста ворид кунед, як блоки дигари барои намоиши рӯйхати таназзулӣ бо муаллимон илова карда.

Барномаи худро оғоз кунед. Дар шакл барои илова кардани донишҷӯ ба шумо бояд рӯйхати таназзулӣ бо муаллимон пайдо шавад, ки шумо дар вазифаҳои гузашта сохта будед.