Ma'lumotlarni URL parametrlari orqali yozish va tahrirlash React Router da

Bizning ilovamiz endi har bir alohida mahsulot uchun ma'lumotlarni ombordan yuklay oladi. Ushbu darsda biz mahsulot haqida ma'lumot qo'shish va uni URL parametrlari orqali tahrirlashni amalga oshirishni boshlaymiz.

Ma'lumotlarni kiritish yoki o'zgartirish uchun biz yana Form komponentidan foydalanamiz. Boshlash uchun keling product.jsx ni ochamiz va yakuniy bezatishda mahsulot ma'lumotlarini tahrirlash uchun tugmacha qo'shamiz - oxirgi abzatsdan keyin (Form ni faylga import qilishni unutmang):

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

Endi bizning mahsulot sahifamizda tahrirlash tugmasi mavjud. Keyin, biz ushbu tugmani bosganimizda, bizni ma'lumotlarni kiritishimiz mumkin bo'lgan shakl joylashgan sahifaga o'tkazadigan qilamiz. Buning uchun, biz yana bitta products/:productId/edit marsrutini yaratamiz. Keling, buning uchun maket yasaylik.

Shunday qilib, routes papkasida biz yangi edit.jsx faylini yaratamiz. Bu yerda bizda name, cost va amount maydonlari to'ldiriladigan shakl, shuningdek saqlash tugmasi bo'ladi. Bularning hammasi bizning EditProduct komponentimizda bo'ladi. name atributlarini belgilash shart, ular keyingi darslarda bizga kerak bo'ladi:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Nomi:</span>
				<input placeholder="nomi" type="text" name="name" />
			</div>
			<div>
				<span>Narxi:</span>
				<input placeholder="narxi" type="text" name="cost" />
			</div>
			<div>
				<span>Miqdori:</span>
				<input placeholder="miqdori" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">saqlash</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Oldingi darslar uchun topshiriqlarda yaratilgan ilovangizni oling. Dars materiallaridan foydalanib, talaba ma'lumotlarini tahrirlash tugmasini qo'shing. Talaba haqidagi ma'lumotlarni tahrirlash uchun edit.jsx faylini yarating, unda talaba haqida ma'lumotlarni to'ldirish uchun shakl bo'lgan EditStudent funksiyasi bo'lsin.