Dodajanje obrazca v Redux

V prejšnji lekciji smo izvedeli, da lahko za vnosna polja obrazca uporabimo stanja (stejte), ki delujejo samo znotraj ene komponente, in ustvarili prazen obrazec.

V oznake form postavimo HTML za vsako polje, kamor bomo vnesli informacije. Prvi vnos bo odgovoren za ime izdelka in njegova koda bo takšna:

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

Drugi bo textarea za opis izdelka:

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

Samostojno napišite kodo za preostala dva vnosa za ceno in količino z ID-jema productPrice in productAmount.

Za vsemi štirimi vnosnimi polji pred zapiralno oznako form dodajte gumb za shranjevanje:

<button type="button">shrani</button>

Naša komponenta z obrazcem je pripravljena. Prikažimo jo na glavni strani. Za to odprite datoteko root.jsx, vanjo uvozite komponento:

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

In jo vstavite med oznako hr in komponento ProductsList takole:

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

Zaženimo našo aplikacijo in občudujmo obrazec in seznam izdelkov. Dodajmo še stile v 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;
}

Odprite vašo aplikacijo s študenti. Ustvarite HTML za vaš obrazec, kot je prikazano v lekciji.

Dodajte dokončano komponento NewStudentForm na glavno stran pred StudentsList