Formada Dəyişikliklərin Redux-da Edilməsi

Bu dərsdə biz məhsul əlavə etmək formasında satıcı məlumatlarının çıxarılması işini tamamlayacayıq. Bunun üçün bizə formanın vertikasında bir az dəyişiklik etmək qalır.

Məhsullarla olan tətbiqimizi açaq, onda NewProductForm.jsx faylını açaq. Gəlin return əmrindən əvvəl bir kod parçası əlavə edək satıcını seçəcəyimiz açılan siyahının vertikası üçün. Onu standart üsulla map ilə həyata keçirək:

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

İndi isə vertikanın özündə dəyişikliklər edək. Bunun üçün formada birinci və ikinci abzaslar arasında (məhsulun adı və təsviri üçün olan vertika blokları arasında) aşağıdakı vertikaya malik bir abzas əlavə edək:

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

İndi biz tətbiqimizi işə sala bilərik. Əlavə etmək formasında bizdə satıcıların siyahısı peyda oldu. Gəlin formanı məlumatlarla doldurmağa çalışaq, onlardan birini seçək və saxlama düyməsinə klik edək. İndi, əgər biz Redux DevTools-a baxsaq, biz dəyişiklikləri görəcəyik - yeni əlavə edilmiş məhsulda bizdə seller xassəsi peyda oldu dəyər kimi seçilmiş satıcının id-si ilə. Həmçinin State bölməsində indi iki slays products və sellers göstərilir.

Tələbələrlə olan tətbiqinizi açın. NewStudentForm.jsx faylında açılan siyahı teachersList yaradın map köməyi ilə, içində müəllimlərin FİO-ları olacaq, dərsdə göstərildiyi kimi.

Vertikada dəyişikliklər edin, əlavə edərək açılan siyahını çıxarmaq üçün daha bir blok müəllimlərlə.

Tətbiqinizi işə salın. Əlavə etmək formasında sizdə müəllimlərlə açılan siyahı peyda olmalıdır, əvvəlki tapşırıqlarda etdiyiniz.