მონაცემთა ჩაწერა და რედაქტირება URL პარამეტრებით React Router-ში

ჩვენს აპლიკაციას ახლა შეუძლია ჩატვირთოს მონაცემები თითოეული ცალკეული პროდუქტისთვის საცავიდან. ამ გაკვეთილზე ჩვენ დავიწყებთ რეალიზებას პროდუქტის ინფორმაციის დამატების და მისი რედაქტირების URL პარამეტრებით.

იმისთვის, რომ შევიტანოთ ან შევცვალოთ მონაცემები, ჩვენ კვლავ გამოვიყენებთ კომპონენტს Form. დასაწყისისთვის გავხსნათ product.jsx და დავამატოთ ბოლოში ვერსტკაში ღილაკი მონაცემთა რედაქტირებისთვის პროდუქტის - ბოლო აბზაცის შემდეგ (არ დაგავიწყდეთ 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, რომელშიც იქნება ფორმა სტუდენტის მონაცემთა შესავსებად.