Pridanie formulára do Reduxu

V predchádzajúcej lekcii sme sa dozvedeli, že pre vstupné polia formulára môžeme použiť stavy, ktoré budú fungovať len v rámci jednej komponenty, a vytvorili sme prázdny formulár.

Umiestnime medzi značky form HTML pre každé pole, do ktorého sa bude zadávať informácia. Prvý input bude zodpovedať za názov produktu a jeho HTML bude takéto:

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

Druhý bude textarea pre popis produktu:

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

Napíšte sami kód pre dva zostávajúce inputy pre cenu a množstvo s ID productPrice a productAmount.

Po všetkých štyroch vstupných poliach pred uzatváracou značkou form pridajte tlačidlo pre uloženie:

<button type="button">uložiť</button>

Naša komponenta s formulárom je pripravená. Zobrazme ju na hlavnej stránke. Preto otvorme súbor root.jsx, importujme do neho komponentu:

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

A vložme ju medzi značku hr a komponentu ProductsList takto:

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

Spustíme našu aplikáciu a pozrieme sa na formulár a zoznam produktov. Pridajme ešte štýly do 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;
}

Otvorte vašu aplikáciu so študentmi. Vytvorte HTML pre váš formulár, ako je ukázané v lekcii.

Pridajte hotovú komponentu NewStudentForm na hlavnú stránku pred StudentsList