Lomakkeen lisääminen Reduxiin

Edellisellä oppitunnilla opimme, että lomakkeen syötekenttiin voidaan käyttää tiloja, jotka toimivat vain yhden komponentin sisällä, ja loimme tyhjän lomakkeen.

form-tagien sisään laitetaan jokaisen kentän merkintäkieli, johon tiedot syötetään. Ensimmäinen syötekenttämme vastaa tuotteen nimeä ja sen merkintäkieli on tällainen:

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

Toinen on textarea tuotteen kuvaukselle:

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

Kirjoita itse koodi kahdelle jäljelle jäävälle syötekentälle hinnalle ja määrälle, joiden id:t ovat productPrice ja productAmount.

Kaikkien neljän syötekentän jälkeen ennen form-tagin sulkeutumista lisää tallennuspainike:

<button type="button">save</button>

Lomakekomponenttimme on valmis. Näytetään se pääsivulla. Avaa tiedosto root.jsx, tuo sinne komponentti:

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

Ja lisää se hr-tagin ja ProductsList-komponentin väliin näin:

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

Käynnistetään sovelluksemme ja katsotaan lomaketta ja tuotelistaa. Lisätään tyylejä tiedostoon 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;
}

Avaa opiskelijasovelluksesi. Tee lomakkeellesi merkintäkieli, kuten oppitunnilla näytetään.

Lisää valmis NewStudentForm-komponentti pääsivulle ennen StudentsList-komponenttia.