Veranderinge aan die vorm in Redux maak

In hierdie les sal ons die werk afhandel om die verkoper se inligting in die vorm vir die byvoeging van 'n produk te wys. Om dit te doen, moet ons die vorm se uitleg effens verander.

Laat ons ons toepassing met produkte oopmaak, en daarin die lêer NewProductForm.jsx. Laat ons voor die return opdrag 'n stukkie kode byvoeg vir die uitleg van die keuselys, waarin ons die verkoper sal kies. Ons sal dit implementeer deur die standaard metode met map:

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

En nou sal ons veranderinge aan die uitleg self maak. Om dit te doen, plaas ons in die vorm tussen die eerste en tweede paragrawe (tussen die uitlegblokke vir die naam en beskrywing van die produk) 'n paragraaf met die volgende uitleg:

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

Nou kan ons ons toepassing begin. In die vorm om by te voeg, verskyn daar nou 'n lys met verkopers. Kom ons probeer om die vorm met data in te vul, een van hulle te kies en op die bewaarknoppie te klik. Nou, as ons in die Redux DevTools kyk, sal ons die veranderinge sien - in die nuwe bygevoegde produk het ons 'n eienskap seller met die id van die gekose verkoper as waarde. Ook word daar nou twee snye vertoon in die State oortjie products en sellers.

Maak jou toepassing met studente oop. In die lêer NewStudentForm.jsx, skep 'n keuselys teachersList met die hulp van map, waarin die volle name van die onderwysers sal wees, soos in die les gewys.

Maak veranderinge aan die uitleg deur nog 'n blok by te voeg vir die vertoon van die keuselys met onderwysers.

Begin jou toepassing. In die vorm om 'n student by te voeg, moet daar 'n keuselys met onderwysers verskyn, wat jy in die vorige take gemaak het.