Inspelning och redigering av data via URL-parametrar i React Router

Vår applikation kan nu ladda data för varje enskild produkt från lagringen. I den här lektionen börjar vi implementera tillägget av produktinformation och dess redigering via URL-parametrar.

För att registrera eller ändra data kommer vi att använda komponenten Form igen. Låt oss först öppna product.jsx och lägga till i slutet av layouten en knapp för att redigera data produkt - efter det sista stycket (glöm inte att importera Form i filen):

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

Nu har vi en redigeringsknapp på vår produktsida. Därefter kommer vi att se till att när vi klickar på den här knappen omdirigeras vi till en sida med ett formulär där vi kan ange data. För att göra detta kommer vi att skapa ytterligare en rutt med products/:productId/edit. Låt oss skapa en layout för detta.

Så, i mappen routes skapar vi en ny fil edit.jsx. Här kommer vi att ha ett formulär med fälten name, cost och amount att fylla i, samt en spara-knapp. Allt detta kommer att finnas i komponenten EditProduct. Se till att ange attributen name, de kommer vi att behöva i kommande lektioner:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Namn:</span>
				<input placeholder="namn" type="text" name="name" />
			</div>
			<div>
				<span>Kostnad:</span>
				<input placeholder="kostnad" type="text" name="cost" />
			</div>
			<div>
				<span>Antal:</span>
				<input placeholder="antal" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">spara</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material, lägg till en knapp för att redigera studentdata. Skapa filen edit.jsx för redigering med funktionen EditStudent, där det kommer att finnas ett formulär för att fylla i data om studenten.