Pakeitimų įvedimas Redux formoje

Šioje pamokoje mes baigsime darbą pardavėjo informacijos atvaizdavime produkto pridėjimo formoje. Tam mums belieka šiek tiek pakeisti formos išdėstymą.

Atidarykime mūsų produktų aplikaciją, o joje failą NewProductForm.jsx. Prieš komandą return pridėkime kodo fragmentą išskleidžiamojo sąrašo, kuriame mes pasirinksime pardavėją, išdėstymui. Įgyvendinkime jį per standartinį būdą su map:

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

Ir dabar atlikime pakeitimus pačiame išdėstyme. Tam formoje tarp pirmos ir antros pastraipų (tarp išdėstymo blokų pavadinimui ir produkto aprašymui) įterpkime pastraipą su šiuo išdėstymu:

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

Dabar mes galime paleisti mūsų aplikaciją. Pridėjimo formoje pasirodė sąrašas su pardavėjais. Pabandykime užpildyti formą duomenimis, pasirinkti vieną iš jų ir spustelėti išsaugojimo mygtuką. Dabar, jei pažvelgsime į Redux DevTools, mes pamatysime pakeitimus - naujame pridėtame produkte pasirodė savybė seller su pasirinkto pardavėjo id kaip reikšme. Taip pat skirtuke State dabar rodomi du suskirstyti duomenys (slices) products ir sellers.

Atidarykite savo studentų aplikaciją. Faile NewStudentForm.jsx sukurkite išskleidžiamąjį sąrašą teachersList su pagalba map, kuriame bus dėstytojų Vardas Pavardė, kaip parodyta pamokoje.

Atlikite pakeitimus išdėstyme, pridėdami dar vieną bloką išskleidžiamojo sąrašo su dėstytojais atvaizdavimui.

Paleiskite savo aplikaciją. Formoje studentui pridėti turėtų pasirodyti išskleidžiamasis sąrašas su dėstytojais, kurį kūrėte ankstesnėse užduotyse.