Adăugarea unui formular în Redux

În lecția anterioară am aflat că pentru câmpurile de introducere ale formularului putem aplica stări care vor funcționa doar în interiorul unei singure componente, și am creat un formular gol.

Să plasăm în interiorul tagurilor form markup-ul pentru fiecare câmp, în care va fi introdusă informația. Primul input va fi responsabil pentru numele produsului și markup-ul său va arăta astfel:

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

Al doilea va fi textarea pentru descrierea produsului:

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

Scrieți singuri codul pentru cele două input-uri rămase pentru preț și cantitate cu id-urile productPrice și productAmount respectiv.

După toate cele patru câmpuri de introducere, înainte de tag-ul de închidere form adăugați un buton pentru salvare:

<button type="button">salvează</button>

Componenta noastră cu formular este gata. Să o afișăm pe pagina principală. Pentru aceasta deschidem fișierul root.jsx, importăm în el componenta:

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

Și o inserăm între tag-ul hr și componenta ProductsList astfel:

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

Să pornim aplicația noastră și să ne minunăm de formular și lista de produse. Să adăugăm și stiluri în 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;
}

Deschideți aplicația voastră cu studenți. Realizați markup-ul pentru formularul vostru, așa cum este demonstrat în lecție.

Adăugați componenta finalizată NewStudentForm pe pagina principală înainte de StudentsList