Kurekodi na Kuhariri Data kwa kutumia Vigezo vya URL katika React Router

Programu yetu sasa ina uwezo wa kupakua data kwa kila bidhaa tofauti kutoka kwa hifadhi. Katika somo hili, tutaanza kutekeleza kuongeza taarifa kuhusu bidhaa na kuihariri kwa kutumia Vigezo vya URL.

Ili kuweka au kubadilisha data tutatumia tena kipengele cha Form. Kwanza, wacha tufungue product.jsx na tuongeze mwisho wa muundo kitufe cha kubofya kwa ajili ya kuhariri data za bidhaa - baada ya aya ya mwisho (usisahau kuingiza Form kwenye faili):

<Form action="edit">
	<button type="submit">hariri</button>
</Form>

Sasa tuna kitufe cha kuhariri kwenye ukurasa wetu wa bidhaa. Ifuatayo, tutafanya ili ubonyeze kitufe hiki tubadilishwe kwenye ukurasa wenye fomu, ambapo tutaweza kuweka data. Kwa kufanya hivyo, tutaunda njia nyingine na products/:productId/edit. Wacha tutengeneze muundo wa hii.

Kwa hiyo, kwenye folda ya routes tutaunda faili mpya edit.jsx. Hapa tutakuwa na fomu yenye sehemu za kujaza name, cost na amount pamoja na kitufe cha kuhifadhi. Yote haya yatakuwa kwenye kipengele cha EditProduct. Hakikisha unaandika sifa name, zitahitajika kwenye masomo yajayo:

import { Form } from 'react-router-dom';

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Jina:</span>
				<input placeholder="jina" type="text" name="name" />
			</div>
			<div>
				<span>Gharama:</span>
				<input placeholder="gharama" type="text" name="cost" />
			</div>
			<div>
				<span>Kiasi:</span>
				<input placeholder="kiasi" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">hifadhi</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Chukua programu uliyoiumba katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, ongeza kitufe cha kuhariri data za mwanafunzi. Unda faili edit.jsx kwa ajili ya kuhariri na kazi EditStudent, ambayo itakuwa na fomu ya kujaza data kuhusu mwanafunzi.