Tilføjelse af formular til Redux

I den forrige lektion lærte vi, at for inputfelter i en formular kan vi anvende tilstande, som kun fungerer inden for en enkelt komponent, og vi oprettede en tom formular.

Lad os inden for form-tags placere koden for hvert felt, hvor information skal indtastes. Vores første input vil være ansvarlig for produktets navn, og koden vil se sådan ud:

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

Den anden vil være en textarea til beskrivelsen af produktet:

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

Skriv selv koden for de to tilbageværende inputfelter for pris og antal med id'ene productPrice og productAmount henholdsvis.

Efter alle fire inputfelter, før det lukkende form-tag, skal du tilføje en knap til gemming:

<button type="button">gem</button>

Vores komponent med formularen er klar. Lad os vise den på forsiden. For at gøre dette åbner vi filen root.jsx, importerer komponenten i den:

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

Og indsætter den mellem hr-tagget og komponenten ProductsList sådan her:

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

Lad os starte vores applikation og beundre formularen og produktlisten. Lad os tilføje nogle flere stilarter til 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;
}

Åbn din applikation med studerende. Lav koden til din formular, som vist i lektionen.

Tilføj den færdige komponent NewStudentForm til forsiden foran StudentsList