Տվյալների գրանցում և խմբագրում URL պարամետրերով React Router-ում

Մեր հավելվածն այժմ կարող է բեռնել յուրաքանչյուր առանձին ապրանքի տվյալները պահեստից: Այս դասում մենք կսկսենք իրականացնել ապրանքի մասին տեղեկատվության ավելացումը և դրա խմբագրումը URL պարամետրերով:

Տվյալներ մուտքագրելու կամ փոփոխելու համար մենք նորից կօգտագործենք Form բաղադրիչը: Սկսելու համար եկեք բացենք product.jsx և ավելացնենք վերջում կոճակ ապրանքի տվյալները խմբագրելու համար՝ վերջին պարբերությունից հետո (մի mոռացեք ներմուծել Form ֆայլը):

<Form action="edit">
	<button type="submit">խմբագրել</button>
</Form>

Այժմ մենք ունենք խմբագրման կոճակ ապրանքի էջում: Հաջորդը, մենք կանենք այնպես, որ այս կոճակը սեղմելիս մեզ վերահղի ձևի էջ, որտեղ մենք կկարողանանք մուտքագրել տվյալներ: Դրա համար մենք կստեղծենք մեկ այլ երթուղի products/:productId/edit-ով: Եկեք դրա համար կաղապար ստեղծենք:

Այսպիսով, routes պանակում մենք կստեղծենք նոր ֆայլ edit.jsx: Այստեղ մենք կունենանք ձև՝ name, cost և amount դաշտերով լրացման համար, ինչպես նաև պահպանելու կոճակով: Բոլորը սա կլինի մեր EditProduct բաղադրիչում: Անպայման գրենք name ատրիբուտները, դրանք մեզ հարկավոր կլինեն հաջորդ դասերին:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Անուն:</span>
				<input placeholder="անուն" type="text" name="name" />
			</div>
			<div>
				<span>Արժեք:</span>
				<input placeholder="արժեք" type="text" name="cost" />
			</div>
			<div>
				<span>Քանակ:</span>
				<input placeholder="քանակ" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">պահպանել</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերի առաջադրանքներում: Օգտագործելով դասի նյութերը, ավելացրեք կոճակ ուսանողի տվյալները խմբագրելու համար: Ստեղծեք edit.jsx ֆայլ խմբագրման համար EditStudent ֆունկցիայով, որում կլինի ձև՝ ուսանողի տվյալները լրացնելու համար: