Izmaiņu veikšana formā Redux

Šajā nodarbībā mēs pabeigsim darbu ar pārdevēja informācijas izvadi formā produkta pievienošanai. Lai to izdarītu, mums jāveic nelielas izmaiņas formas izkārtojumā.

Atveram mūsu produktu lietotni, un tajā failu NewProductForm.jsx. Pievienosim pirms return komandas koda fragmentu izkrītošā saraksta izkārtojumam, kurā mēs izvēlēsimies pārdevēju. Realizēsim to caur standarta metodi ar map:

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

Un tagad veiksim izmaiņas pašā izkārtojumā. Lai to izdarītu, formā starp pirmo un otro rindkopu (starp izkārtojuma blokiem nosaukumam un produkta aprakstam) ievietosim rindkopu ar šādu izkārtojumu:

<p>
	<label htmlFor="prodSeller">Pārdevējs:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Tagad mēs varam palaist mūsu lietotni. Pievienošanas formā mums parādījās saraksts ar pārdevējiem. Mēģināsim aizpildīt formu ar datiem, izvēlēties vienu no tiem un noklikšķināt uz saglabāšanas pogas. Tagad, ja mēs ieskatīsimies Redux DevTools, mēs redzēsim izmaiņas - jaunajā pievienotajā produktā mums parādījās īpašība seller ar izvēlētā pārdevēja id kā vērtību. Arī cilnē State tagad tiek rādīti divi šķēles products un sellers.

Atveriet savu studentu lietotni. Failā NewStudentForm.jsx izveidojiet izkrītošo sarakstu teachersList ar palīdzību map, kurā būs pasniedzēju vārdi, uzvārdi, kā parādīts nodarbībā.

Veiciet izmaiņas izkārtojumā, pievienojot vēl vienu bloku izkrītošā saraksta ar pasniedzējiem attēlošanai.

Palaidiet savu lietotni. Formā studenta pievienošanai jums vajadzētu parādīties izkrītošajam sarakstam ar pasniedzējiem, ko izveidojāt iepriekšējos uzdevumos.