Дар 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>Ном:</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 эҷод кунед, ки дар он шакле барои пур кардани маълумот дар бораи донишҷӯ бошад.