Űrlap hozzáadása a Redux-hoz

Az előző leckén megtanultuk, hogy a beviteli mezők számára használhatunk olyan állapotokat, amelyek csak egy komponensen belül működnek, és létrehoztunk egy üres űrlapot.

Helyezzük a form tag-ek közé a megjelenést minden egyes mező számára, ahová az információt be kell írni. Az első input mező a termék nevéért fog felelni, és a megjelenése ilyen lesz:

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

A második egy textarea lesz a termék leírásához:

<p>
	<label htmlFor="productDesc">Leírás:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Írd meg magad a kódot a maradék két input mezőhöz az ár és a mennyiség számára, productPrice és productAmount azonosítóval.

A négy beviteli mező után a lezáró form tag elé add hozzá a mentés gombot:

<button type="button">mentés</button>

Az űrlap komponensünk kész. Jelenítsük meg a főoldalon. Ehgy nyissuk meg a root.jsx fájlt, importáljuk bele a komponenst:

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

És illesszük be a hr tag és a ProductsList komponens közé, így:

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

Indítsuk el az alkalmazásunkat és csodáljuk meg az űrlapot és a terméklistát. Adjunk hozzá még stílusokat a index.css fájlhoz:

#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;
}

Nyisd meg a diákokkal kapcsolatos alkalmazásodat. Készítsd el az űrlapod megjelenését, ahogyan az a leckében bemutatásra került.

Add hozzá a kész NewStudentForm komponenst a főoldalra a StudentsList elé.