Änderungen am Formular in Redux vornehmen

In dieser Lektion werden wir die Arbeit am Ausgeben der Verkäuferinformationen im Formular zum Hinzufügen eines Produkts abschließen. Dafür müssen wir nur noch das Markup des Formulars leicht ändern.

Öffnen wir unsere Produktanwendung und darin die Datei NewProductForm.jsx. Lasst uns vor dem return-Befehl ein Stück Code für das Markup der Dropdown-Liste hinzufügen, in der wir den Verkäufer auswählen werden. Wir implementieren es auf die standardmäßige Weise mit map:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

Und nun nehmen wir Änderungen am eigentlichen Markup vor. Dafür fügen wir im Formular zwischen dem ersten und dem zweiten Absatz (zwischen den Markup-Blöcken für den Namen und die Beschreibung des Produkts) einen Absatz mit folgendem Markup ein:

<p>
	<label htmlFor="prodSeller">Seller:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

Jetzt können wir unsere Anwendung starten. Im Formular zum Hinzufügen ist eine Liste mit Verkäufern erschienen. Versuchen wir, das Formular mit Daten auszufüllen, einen von ihnen auszuwählen und auf den Speichern-Button zu klicken. Wenn wir nun in die Redux DevTools schauen, werden wir Änderungen sehen - im neu hinzugefügten Produkt ist die Eigenschaft seller mit der ID des ausgewählten Verkäufers als Wert erschienen. Außerdem werden im State-Tab jetzt zwei Slices products und sellers angezeigt.

Öffnen Sie Ihre Studentenanwendung. Erstellen Sie in der Datei NewStudentForm.jsx eine Dropdown-Liste teachersList mit Hilfe von map, in der die Vollständigen Namen der Lehrer stehen, wie in der Lektion gezeigt.

Nehmen Sie Änderungen am Markup vor, indem Sie einen weiteren Block für die Ausgabe der Dropdown- Liste mit den Lehrern hinzufügen.

Starten Sie Ihre Anwendung. Im Formular zum Hinzufügen eines Studenten sollte die Dropdown-Liste mit den Lehrern erscheinen, die Sie in den vorherigen Aufgaben erstellt haben.