Vorm byvoeging in Redux

In die vorige les het ons geleer dat ons state kan toepas vir invoervelde in 'n vorm wat net binne een komponent sal werk, en ons het 'n leë vorm geskep.

Laat ons binne die form-tags die uitleg plaas vir elke veld waar inligting ingevoer sal word. Die eerste invoervel sal vir die produknaam wees en sy uitleg sal so lyk:

<form>
	<p>
		<label htmlFor="productName">Naam:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Die tweede sal 'n textarea wees vir die produkbeskrywing:

<p>
	<label htmlFor="productDesc">Beskrywing:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Skryf self die kode vir die twee oorblywende invoervelde vir prys en hoeveelheid met onderskeidelik id productPrice en productAmount.

Na al vier die invoervelde, voeg voor die sluitings-tag form 'n knoppie by om te stoor:

<button type="button">stoor</button>

Ons vormkomponent is gereed. Laat ons dit vertoon op die hoofblad. Om dit te doen, maak ons die lêer root.jsx oop, voer die komponent in:

import { NewProductForm } from '../parts/products/NewProductForm'

En plaas dit tussen die hr-tag en die ProductsList-komponent so:

<hr></hr>
<NewProductForm />
<ProductsList />

Laat ons ons toepassing begin en kyk na die vorm en produklys. Laat ons nog style byvoeg by index.css:

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

Maak jou studentetoepassing oop. Maak die uitleg vir jou vorm, soos aangedui in die les.

Voeg die voltooide komponent NewStudentForm by die hoofblad voor StudentsList