React Router'до URL параметрлери боюнча маалыматтарды жазуу жана оңдоо

Биздин колдонмонуз ар бир өндүрүш үчүн маалыматтарды кампадан жүктөй алат. Бул сабакта биз өндүрүш тууралуу маалымат кошуу жана аны 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 функциясы болсун.