Duomenų įrašymas ir redagavimas pagal URL parametrus React Router

Mūsų programa dabar gali įkelti duomenis kiekvienam atskiram produktui iš sandėlio. Šioje pamokoje pradėsime įgyvendinti produkto informacijos pridėjimą ir jos redagavimą pagal URL parametrus.

Kad galėtume įrašyti ar keisti duomenis, mes vėl naudosime komponentą Form. Pirmiausia atidarykime product.jsx ir pridėkime pabaigoje, po išdėstymo, mygtuką duomenų redagavimui produkto - po paskutine pastraipa (nepamirškite importuoti Form į failą):

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

Dabar mūsų produkto puslapyje yra redagavimo mygtukas. Toliau pasidarysime taip, kad paspaudus šį mygtuką mes būtume nukreipti į puslapį su forma, kur galėsime įvesti duomenis. Tam sukursime dar vieną maršrutą su products/:productId/edit. Sukurkime tam maketą.

Taigi, routes aplanke mes sukursime naują failą edit.jsx. Čia mes turėsime formą su laukeliais name, cost ir amount užpildymui, taip pat išsaugojimo mygtuką. Visa tai bus mūsų komponente EditProduct. Būtinai nurodykite atributus name, jie mums prireiks kitose pamokose:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Pavadinimas:</span>
				<input placeholder="pavadinimas" type="text" name="name" />
			</div>
			<div>
				<span>Kaina:</span>
				<input placeholder="kaina" type="text" name="cost" />
			</div>
			<div>
				<span>Kiekis:</span>
				<input placeholder="kiekis" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">išsaugoti</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, pridėkite studento duomenų redagavimo mygtuką. Sukurkite failą edit.jsx redagavimui su funkcija EditStudent, kurioje bus forma studento duomenims užpildyti.