Erfassung und Bearbeitung von Daten über URL-Parameter in React Router

Unsere Anwendung kann nun Daten für jedes einzelne Produkt aus dem Speicher laden. In dieser Lektion beginnen wir mit der Implementierung des Hinzufügens von Produktinformationen und deren Bearbeitung über URL-Parameter.

Um Daten zu erfassen oder zu ändern, werden wir wieder die Komponente Form verwenden. Öffnen wir zunächst product.jsx und fügen am Ende des Layouts eine Schaltfläche zum Bearbeiten der Produktdaten hinzu - nach dem letzten Absatz (vergessen Sie nicht, Form in der Datei zu importieren):

<Form action="edit">
	<button type="submit">edit</button>
</Form>

Jetzt haben wir eine Bearbeitungsschaltfläche auf unserer Produktseite. Als Nächstes werden wir es so einrichten, dass wir beim Klicken dieser Schaltfläche zu einer Seite mit einem Formular weitergeleitet werden, in das wir Daten eingeben können. Dazu erstellen wir eine weitere Route mit products/:productId/edit. Lassen Sie uns dafür ein Layout erstellen.

Also erstellen wir im Ordner routes eine neue Datei edit.jsx. Hier werden wir ein Formular mit den Feldern name, cost und amount zum Ausfüllen sowie einer Speichern-Schaltfläche haben. All dies wird in der Komponente EditProduct enthalten sein. Achten Sie darauf, die Attribute name anzugeben, wir werden sie in den nächsten Lektionen benötigen:

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Name:</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Cost:</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Amount:</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">save</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektionen erstellt haben. Nutzen Sie die Materialien der Lektion und fügen Sie eine Schaltfläche zum Bearbeiten der Studentendaten hinzu. Erstellen Sie die Datei edit.jsx zur Bearbeitung mit der Funktion EditStudent, in der sich ein Formular zur Erfassung der Daten eines Studenten befindet.