React Router да URL параметрлар орқали маълумотларни ёзиш ва таҳрирлаш

Бизнинг иловамиз энди ҳар бир маҳсулот учун маълумотларни сақловидан юклаб олиши мумкин. Ушбу дарсда биз URL параметрлар орқали маҳсулот ҳақида маълумот қўшиш ва уни таҳрирлашни амалга оширишни бошлаймиз.

Маълумотларни киритиш ва ўзгартириш учун биз яна Form компонентидан фойдаланамиз. Бошлаш учун product.jsx файлини очийлик ва верстканинг охирида маҳсулот маълумотларини таҳрирлаш учун тугма қўшайлик - охирги абзацдан кейин (Form ни файлга импорт қилишни унутмангиз):

<Form action="edit">
	<button type="submit">edit</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>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;

Олдинги дарслар учун topshiriqlarda яратган иловангизни олинг. Дарс материалларидан фойдаланиб, студент маълумотларини таҳрирлаш тугмасини қўшинг. edit.jsx файлини яратинг таҳрирлаш учун EditStudent функцияси билан, унинг ичида студент ҳақида маълумот тўлдириш учун форма бўлсин.