Деректерді URL параметрлері бойынша жазу және өңдеу React Router-де

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