Zápis a úprava údajov pomocou URL parametrov v React Router

Naša aplikácia teraz dokáže načítať údaje pre každý jednotlivý produkt z úložiska. V tejto lekcii začneme implementovať pridávanie informácií o produkte a ich úpravu pomocou URL parametrov.

Na zaznamenávanie alebo zmenu údajov budeme opäť používať komponent Form. Na začiatok otvorme product.jsx a pridajme na koniec rozloženia tlačidlo na úpravu údajov produktu - za posledným odsekom (nezabudnite importovať Form do súboru):

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

Teraz máme na stránke produktu tlačidlo na úpravu. Ďalej spravíme to, aby po kliknutí na toto tlačidlo nás presmerovalo na stránku s formulárom, kde budeme môcť zadávať údaje. Na to vytvoríme ďalšiu trasu s products/:productId/edit. Poďme na to vytvoriť šablónu.

Takže, v priečinku routes vytvoríme nový súbor edit.jsx. Tu bude formulár s poliami name, cost a amount na vyplnenie, ako aj tlačidlom uloženia. Všetko to bude v komponente EditProduct. Nezabudnite uviesť atribúty name, budú sa nám hodiť v nasledujúcich lekciách:

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;

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov z lekcie pridajte tlačidlo na úpravu údajov študenta. Vytvorte súbor edit.jsx pre úpravu s funkciou EditStudent, v ktorej bude formulár na vyplnenie údajov o študentovi.