Înregistrarea și editarea datelor prin parametrii URL în React Router

Aplicația noastră poate acum încărca datele pentru fiecare produs individual din depozit. În această lecție vom începe să implementăm adaugarea informațiilor despre produs și editarea acestora folosind parametrii URL.

Pentru a introduce sau modifica date vom folosi din nou componenta Form. Pentru început, să deschidem product.jsx și să adăugăm la sfârșitul layout-ului un buton pentru editarea datelor produsului - după ultimul paragraf (nu uitați să importați Form în fișier):

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

Acum avem pe pagina produsului un buton de editare. În continuare, vom face ca la apăsarea acestui buton să fim redirecționați către o pagină cu un formular, unde putem introduce date. Pentru aceasta, vom crea un alt ruta cu products/:productId/edit. Să creăm un layout pentru aceasta.

Deci, în folderul routes vom crea un nou fișier edit.jsx. Aici vom avea un formular cu câmpurile name, cost și amount de completat, precum și un buton de salvare. Toate acestea vor fi în componenta EditProduct. Asigurați-vă că specificați atributele name, acestea vor fi necesare în lecțiile următoare:

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;

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, adăugați un buton pentru editarea datelor studentului. Creați fișierul edit.jsx pentru editare cu funcția EditStudent, în care va fi un formular pentru completarea datelor despre student.