Andmete salvestamine ja muutmine URL-i parameetrite kaudu React Routeris

Meie rakendus suudab nüüd laadida iga toote andmed eraldi hoidlast. Selles õppetükis hakkame rakendama tooteinfo lisamist ja selle muutmist URL-i parameetrite kaudu.

Andmete sisestamiseks või muutmiseks kasutame jälle komponenti Form. Alustuseks avame product.jsx ja lisame lõppu nupu toote andmete muutmiseks - pärast viimast lõiku (ära unusta importida Form faili):

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

Nüüd on meie toote lehel muutmise nupp. Järgmisena teeme nii, et selle nupu vajutamisel suunatakse meid vormiga lehele, kus saame sisestada andmeid. Selleks loome veel ühe marsruudi products/:productId/edit. Teeme selle jaoks kujunduse.

Niisiis, kaustas routes loome uue faili edit.jsx. Siin on meil vorm väljadega name, cost ja amount täitmiseks, samuti salvestamise nupp. Kõik see on komponendis EditProduct. Pane kindlasti kirja atribuudid name, need meil lähevad vaja järgmistes õppetükides:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Nimi:</span>
				<input placeholder="nimi" type="text" name="name" />
			</div>
			<div>
				<span>Hind:</span>
				<input placeholder="hind" type="text" name="cost" />
			</div>
			<div>
				<span>Kogus:</span>
				<input placeholder="kogus" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">salvesta</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Võtke rakendus, mille lõite eelmiste õppetundide ülesannetes. Kasutades õppetunni materjale, lisage nupp õpilase andmete muutmiseks. Looge fail edit.jsx muutmiseks funktsiooniga EditStudent, milles on vorm õpilase andmete täitmiseks.