Kufanya Mabadiliko kwenye Fomu katika Redux

Katika somo hili tutamaliza kazi ya kuonyesha taarifa kuhusu muuzaji kwenye fomu ya kuongeza bidhaa. Ili kufanya hivyo, tunahitaji kubadilisha kidogo muundo wa fomu.

Tufungue programu yetu ya bidhaa, na ndani yake faili NewProductForm.jsx. Hebu kabla ya amri return tuongeze kipande cha msimbo kwa muundo wa orodha inayotoka, ambayo tutachagua muuzaji. Tutaitengeneza kwa kutumia njia ya kawaida na map:

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

Na sasa tutafanye mabadiliko kwenye muundo wenyewe. Ili kufanya hivyo kwenye fomu kati ya aya ya kwanza na ya pili (kati ya vitalu vya muundo kwa jina na maelezo ya bidhaa) tutaingiza aya na muundo ufuatao:

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

Sasa tunaweza kuanzisha programu yetu. Kwenye fomu ya kuongeza kumetokea orodha ya wauzaji. Hebu tujaribu kujaza fomu kwa data, kuchagua mmoja wao na kubofya kitufe cha kuhifadhi. Sasa, kama tukitazama kwenye Redux DevTools, tutaona mabadiliko - kwenye bidhaa mpya iliyoongezwa kumetokea sifa seller na kitambulisho cha muuzaji aliyechaguliwa kama thamani. Pia kwenye kichupo cha State sasa inaonyesha sehemu mbili products na sellers.

Fungua programu yako ya wanafunzi. Kwenye faili NewStudentForm.jsx tengeneza orodha inayotoka teachersList kwa msaada wa map, ambayo itakuwa na majina kamili ya walimu, kama inavyoonyeshwa kwenye somo.

Fanya mabadiliko kwenye muundo, ukiongeza block nyingine ya kuonyesha orodha inayotoka ya walimu.

Anzisha programu yako. Kwenye fomu ya kuongeza mwanafunzi inapaswa kuonekana orodha inayotoka ya walimu, ambayo umefanya kwenye kazi zilizopita.