Adatok rögzítése és szerkesztése URL paraméterek alapján a React Routerben

Alkalmazásunk most már képes betölteni az adatokat minden egyes termékhez a tárolóból. Ezen a leckén elkezdjük megvalósítani a termékekkel kapcsolatos információk hozzáadását és szerkesztését URL paraméterek segítségével.

Ahhoz, hogy adatokat rögzíthessünk vagy módosíthassunk, isét a Form komponenst fogjuk használni. Kezdésként nyissuk meg a product.jsx fájlt és adjuk hozzá a végéhez egy gombot a termék adatainak szerkesztéséhez - az utolsó bekezdés után (ne felejtsük el importálni a Form-ot a fájlba):

<Form action="edit">
	<button type="submit">szerkesztés</button>
</Form>

Most már van egy szerkesztés gomb a termék oldalán. Ezután úgy fogjuk beállítani, hogy amikor megnyomjuk ezt a gombot, az átirányít minket egy űrlapot tartalmazó oldalra, ahol adatokat tudunk megadni. Ehhez létre fogunk hozni egy másik útvonalat a products/:productId/edit útvonallal. Készítsünk ehhoz egy sablont.

Tehát a routes mappában létrehozunk egy új fájlt edit.jsx. Itt lesz egy űrlapunk name, cost és amount mezőkkel a kitöltéshez, valamint egy mentés gombbal. Mindez a EditProduct komponensben lesz. Mindíg adjuk meg a name attribútumokat, ezekre szükségünk lesz a következő leckékben:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Név:</span>
				<input placeholder="név" type="text" name="name" />
			</div>
			<div>
				<span>Költség:</span>
				<input placeholder="költség" type="text" name="cost" />
			</div>
			<div>
				<span>Mennyiség:</span>
				<input placeholder="mennyiség" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">mentés</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Vegyük azt az alkalmazást, amit az előző leckékhez szóló feladatokban készítettél. A lecke anyagait használva adj hozzá egy gombot a hallgató adatainak szerkesztéséhez. Hozd létre a edit.jsx fájlt a szerkesztéshez a EditStudent függvénnyel, amelyben egy űrlap lesz a hallgató adatainak kitöltéséhez.