Regjistrimi dhe Redaktimi i të Dhënave sipas Parametrave URL në React Router

Aplikacioni ynë tani mund të ngarkojë të dhënat për çdo produkt individual nga depoja. Në këtë mësim, do të fillojmë të implementojmë shtimin e informacionit për produktin dhe redaktimin e tij sipas parametrave URL.

Për të shënuar ose ndryshuar të dhënat ne do të përdorim përsëri komponentin Form. Për fillim, le të hapim product.jsx dhe të shtojmë në fund të faqosjes butonin për redaktimin e të dhënave të produktit - pas paragrafit të fundit (mos harroni të importoni Form në file):

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

Tani ne kemi në faqen e produktit butonin e redaktimit. Më pas, do të bëjmë që gjëja që kur shtypim këtë buton të na ridrejtojë në një faqe me formular, ku mund të fusim të dhënat. Për këtë, ne do të krijojmë një rrugëtim tjetër me products/:productId/edit. Le të bëjmë një model për këtë.

Pra, në dosjen routes do të krijojmë një file të ri edit.jsx. Këtu do të kemi një formular me fushat name, cost dhe amount për plotësim, si dhe butonin e ruajtjes. E gjithë kjo do të jetë në komponentin EditProduct. Patjetër do t'i përcaktojmë atributet name, ato do të na duhen në mësimet në vijim:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Emri:</span>
				<input placeholder="emri" type="text" name="name" />
			</div>
			<div>
				<span>Kosto:</span>
				<input placeholder="kosto" type="text" name="cost" />
			</div>
			<div>
				<span>Sasia:</span>
				<input placeholder="sasia" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">ruaj</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, shtoni butonin e redaktimit të të dhënave të studentit. Krijoni file-in edit.jsx për redaktim me funksionin EditStudent, në të cilin do të ketë formular për plotësimin e të dhënave të studentit.