Přidání formuláře do Reduxu

V minulé lekci jsme se dozvěděli, že pro vstupní pole formuláře lze použít stavy, které budou fungovat pouze uvnitř jedné komponenty, a vytvořili jsme prázdný formulář.

Uvnitř tagů form umístíme značkování pro každé pole, do kterého se bude zadávat informace. První input bude odpovídat za název produktu a jeho značkování bude vypadat takto:

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

Druhý bude textarea pro popis produktu:

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

Napište sami kód pro dva zbývající inputy pro cenu a množství s ID productPrice a productAmount.

Po všech čtyřech vstupních polích před uzavíracím tagem form přidejte tlačítko pro uložení:

<button type="button">uložit</button>

Naše komponenta s formulářem je hotová. Zobrazme ji na hlavní stránce. Pro otevřeme soubor root.jsx, importujme do něj komponentu:

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

A vložme ji mezi tag hr a komponentu ProductsList takto:

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

Spusťme naši aplikaci a podívejme se na formulář a seznam produktů. Přidejme ještě styly 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;
}

Otevřete vaši aplikaci se studenty. Vytvořte značkování pro váš formulář, jak je ukázáno v lekci.

Přidejte hotovou komponentu NewStudentForm na hlavní stránku před StudentsList