Legge til et skjema i Redux

I forrige leksjon lærte vi at for inndatafelt i et skjema kan vi bruke tilstander som kun vil fungere innenfor en enkelt komponent, og opprettet et tomt skjema.

La oss innenfor form-taggene plassere koden for hvert felt der informasjonen skal legges inn. Den første inndataen vil være ansvarlig for produktnavnet og koden vil se slik ut:

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

Den andre vil være en textarea for produktbeskrivelsen:

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

Skriv selv koden for de to gjenværende inndataene for pris og antall med id productPrice og productAmount henholdsvis.

Etter alle fire inndatafelt før den avsluttende form-taggen, legg til en knapp for lagring:

<button type="button">lagre</button>

Vår skjemakomponent er klar. La oss vise den på hovedsiden. For å gjøre dette, åpner vi filen root.jsx, importerer komponenten i den:

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

Og setter den inn mellom hr-taggen og komponenten ProductsList slik:

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

La oss starte applikasjonen vår og beundre skjemaet og produktlisten. La oss legge til noen flere stiler i 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;
}

Åpne studentapplikasjonen din. Opprett koden for skjemaet ditt, som vist i leksjonen.

Legg til den ferdige komponenten NewStudentForm på hovedsiden før StudentsList