Att lägga till ett formulär i Redux

I förra lektionen lärde vi oss att för formulärfält kan vi använda tillstånd som bara fungerar inom en komponent, och skapade ett tomt formulär.

Låt oss inuti taggarna form placera utseendet för varje fält där information skall anges. Den första inmatningen kommer att hantera produktens namn och dess utseende kommer att se ut så här:

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

Den andra kommer att vara en textarea för produktbeskrivningen:

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

Skriv själv koden för de två återstående inmatningarna för pris och antal med id productPrice respektive productAmount.

Efter alla fyra inmatningsfält före den stängande taggen form, lägg till en knapp för att spara:

<button type="button">spara</button>

Vår komponent med formuläret är klar. Låt oss visa den på huvudsidan. För att göra detta öppnar vi filen root.jsx, importerar komponenten i den:

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

Och sätter in den mellan taggen hr och komponenten ProductsList så här:

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

Låt oss starta vår applikation och beundra formuläret och produktlistan. Låt oss lägga till lite stilar 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;
}

Öppna din applikation med studenter. Gör utseendet för ditt formulär, som visas i lektionen.

Lägg till den färdiga komponenten NewStudentForm på huvudsidan före StudentsList