Datu ierakstīšana un rediģēšana pēc URL parametriem React Router

Mūsu lietotne tagad var ielādēt datus katram atsevišķam produktam no krātuves. Šajā nodarbībā mēs sāksim īstenot produkta informācijas pievienošanu un tās rediģēšanu pēc URL parametriem.

Lai pievienotu vai mainītu datus, mēs atkal izmantosim komponentu Form. Sākumā atvērsim product.jsx un pievienosim beigās izkārtojumā pogu produkta datu rediģēšanai - pēc pēdējās rindkopas (neaizmirstiet importēt Form failā):

<Form action="edit">
	<button type="submit">rediģēt</button>
</Form>

Tagad mūsu produkta lapā ir rediģēšanas poga. Tālāk mēs darīsim tā, lai nospiežot šo pogu, mūs pārvirzītu uz lapu ar formu, kur mēs varēsim ievadīt datus. Šim nolūkam mēs izveidosim vēl vienu maršrutu ar products/:productId/edit. Izveidosim šim maketu.

Tātad, routes mapē mēs izveidosim jaunu failu edit.jsx. Šeit mums būs forma ar laukiem name, cost un amount aizpildīšanai, kā arī saglabāšanas pogu. Viss tas būs komponentā EditProduct. Noteikti norādīsim atribūtus name, tie mums būs vajadzīgi nākamajās nodarbībās:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Nosaukums:</span>
				<input placeholder="nosaukums" type="text" name="name" />
			</div>
			<div>
				<span>Izmaksas:</span>
				<input placeholder="izmaksas" type="text" name="cost" />
			</div>
			<div>
				<span>Daudzums:</span>
				<input placeholder="daudzums" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">saglabāt</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, pievienojiet pogu studenta datu rediģēšanai. Izveidojiet failu edit.jsx rediģēšanai ar funkciju EditStudent, kurā būs forma studenta datu aizpildīšanai.