Dodavanje forme u Redux

Na prošloj lekciji smo saznali da se za polja unosa forme mogu primeniti stejtovi, koji će raditi samo unutar jedne komponente, i kreirali smo praznu formu.

Hajde unutar tagova form postavimo verstatku za svako polje, u koje će se unositi informacija. Prvi input će biti zadužen za naziv proizvoda i njegova verzija biće ovakva:

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

Drugi će biti textarea za opis proizvoda:

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

Napišite sami kod za dva preostala inputa za cenu i količinu sa ID productPrice i productAmount respektivno.

Posle sva četiri polja unosa, pre zatvarajućeg taga form dodajte dugme za čuvanje:

<button type="button">sačuvaj</button>

Naša komponenta sa formom je spremna. Hajde da je prikažemo na glavnoj stranici. Za to ćemo otvoriti fajl root.jsx, importovati u njega komponentu:

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

I ubaciti je između taga hr i komponente ProductsList ovako:

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

Pokrenimo našu aplikaciju i uživajmo u formi i listi proizvoda. Unesimo još stilova u 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;
}

Otvorite vašu aplikaciju sa studentima. Napravite verstatku za vašu formu, kao što je prikazano na lekciji.

Dodajte gotovu komponentu NewStudentForm na glavnu stranicu pre StudentsList