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, որում կլինեն դասախոսների ԱԱՀ-ները, ինչպես ցուցադրված է դասում:

Կատարեք փոփոխություններ վերլուծության մեջ՝ ավելացնելով մեկ այլ բլոկ բացվող ցուցակը դասախոսներով ցուցադրելու համար:

Գործարկեք ձեր հավելվածը: Ուսանող ավելացնելու ֆորմայում ձեզ մոտ պետք է հայտնվի բացվող ցուցակ դասախոսներով, որը դուք պատրաստել էիք նախորդ առաջադրանքներում: