Formulier toevoegen aan Redux

In de vorige les hebben we geleerd dat voor formulier invoervelden states kunnen worden gebruikt, die alleen binnen één component werken, en hebben we een leeg formulier gemaakt.

Laten we binnen de form tags de opmaak plaatsen voor elk veld waarin informatie wordt ingevoerd. De eerste input zal verantwoordelijk zijn voor de productnaam en de opmaak zal er als volgt uitzien:

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

De tweede zal een textarea zijn voor de beschrijving van het product:

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

Schrijf zelf de code voor de twee overgebleven inputs voor prijs en hoeveelheid met de id's productPrice en productAmount respectievelijk.

Na alle vier de invoervelden, vóór de sluitende form tag, voegt u een knop toe om op te slaan:

<button type="button">opslaan</button>

Onze formuliercomponent is klaar. Laten we deze weergeven op de hoofdpagina. Open hiervoor het bestand root.jsx, importeer de component:

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

En plaats deze tussen de hr tag en de ProductsList component als volgt:

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

Laten we onze applicatie starten en genieten van het formulier en de productlijst. Laten we ook nog stijlen toevoegen in 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;
}

Open uw applicatie met studenten. Maak de opmaak voor uw formulier, zoals getoond in de les.

Voeg de voltooide component NewStudentForm toe aan de hoofdpagina vóór StudentsList