Zapisovanje in urejanje podatkov prek URL parametrov v React Router

Naša aplikacija lahko zdaj naloži podatke za vsak posamezen izdelek iz shrambe. V tej lekciji bomo začeli izvajati dodajanje informacij o izdelku in njihovo urejanje prek URL parametrov.

Za vnašanje ali spreminjanje podatkov bomo spet uporabili komponento Form. Za začetek odprimo product.jsx in dodajmo na koncu izgleda gumb za urejanje podatkov izdelka - za zadnjim odstavkom (ne pozabite uvoziti Form v datoteko):

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

Zdaj imamo na strani izdelka gumb za urejanje. Nato bomo poskrbeli, da nas ob kliku na ta gumb preusmeri na stran z obrazcem, kjer bomo lahko vnašali podatke. Za to bomo ustvarili še eno pot z products/:productId/edit. Naredimo za to postavitev.

Torej, v mapi routes bomo ustvarili novo datoteko edit.jsx. Tukaj bomo imeli obrazec s polji name, cost in amount za izpolnjevanje, ter gumbom za shranjevanje. Vse to bo v komponenti EditProduct. Obvezno navedimo atribute name, potrebovali jih bomo v naslednjih lekcijah:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Ime:</span>
				<input placeholder="ime" type="text" name="name" />
			</div>
			<div>
				<span>Cena:</span>
				<input placeholder="cena" type="text" name="cost" />
			</div>
			<div>
				<span>Količina:</span>
				<input placeholder="količina" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">shrani</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije, dodajte gumb za urejanje podatkov študenta. Ustvarite datoteko edit.jsx za urejanje s funkcijo EditStudent, v kateri bo obrazec za izpolnjevanje podatkov o študentu.