Запіс і рэдагаванне дадзеных па URL параметрах у React Router

Наша дадатак цяпер можа загружаць дадзеныя для кожнага асобнага прадукту з сховішча. На гэтым уроку мы пачнем рэалізаваць даданне інфармацыі пра прадукт і яе рэдагаванне па 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;

Вазьміце дадатак, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, дадайце кнопку рэдагавання дадзеных студэнта. Стварыце файл edit.jsx для рэдагавання з функцыяй EditStudent, у якой будзе форма для запаўнення дадзеных пра студэнта.