Hinzufügen eines Formulars zu Redux

In der letzten Lektion haben wir gelernt, dass für Eingabefelder eines Formulars States verwendet werden können, die nur innerhalb einer Komponente funktionieren, und wir haben ein leeres Formular erstellt.

Lassen Sie uns innerhalb der Tags form das Markup für jedes Feld platzieren, in das Informationen eingetragen werden sollen. Der erste Input wird für den Produktnamen verantwortlich sein und sein Markup sieht so aus:

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

Der zweite wird ein textarea für die Beschreibung des Produkts sein:

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

Schreiben Sie selbst den Code für die zwei verbleibenden Inputs für Preis und Menge mit den IDs productPrice und productAmount respectively.

Fügen Sie nach allen vier Eingabefeldern vor dem schließenden Tag form einen Button zum Speichern hinzu:

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

Unsere Formularkomponente ist fertig. Lassen Sie uns diese auf der Hauptseite anzeigen. Dazu öffnen wir die Datei root.jsx, importieren die Komponente:

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

Und fügen sie zwischen dem Tag hr und der Komponente ProductsList ein, so:

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

Starten wir unsere Anwendung und betrachten das Formular und die Produktliste. Geben wir noch einige Stile in index.css hinzu:

#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;
}

Öffnen Sie Ihre Anwendung mit den Studenten. Erstellen Sie das Markup für Ihr Formular, wie in der Lektion gezeigt.

Fügen Sie die fertige Komponente NewStudentForm auf der Hauptseite vor StudentsList hinzu.