Opname en redigering van data volgens URL-parameters in React Router

Ons toepassing kan nou data vir elke afsonderlike produk uit die stoor laai. In hierdie les begin ons implementeer die byvoeging van produk-inligting en die redigering daarvan volgens URL-parameters.

Om data in te voer of te verander, sal ons weer die Form-komponent gebruik. Kom ons maak eers product.jsx oop en voeg aan die einde van die opmaak 'n knoppie om produkdata te redigeer - na die laaste paragraaf (moenie vergeet om Form in die lêer te importeer nie):

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

Nou het ons 'n wysigingsknoppie op die produkblad. Vervolgens sal ons maak dat as ons op hierdie knoppie druk, ons na 'n bladsy met 'n vorm oorgeplaas word waar ons data kan invoer. Hiervoor sal ons nog 'n roete skep met products/:productId/edit. Kom ons skep 'n uitleg hiervoor.

Dus, in die gids routes sal ons 'n nuwe lêer edit.jsx skep. Hier sal ons 'n vorm hê met die velde name, cost en amount om in te vul, sowel as 'n knoppie om te stoor. Dit alles sal in die komponent EditProduct wees. Maak seker om die name-eienskappe te spesifiseer, ons sal hulle in die volgende lesse nodig hê:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Naam:</span>
				<input placeholder="naam" type="text" name="name" />
			</div>
			<div>
				<span>Koste:</span>
				<input placeholder="koste" type="text" name="cost" />
			</div>
			<div>
				<span>Hoeveelheid:</span>
				<input placeholder="hoeveelheid" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">stoor</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Neem die toepassing wat jy in die take vir vorige lesse geskep het. Gebruik die lesmateriaal, voeg 'n knoppie om studentdata te redigeer by. Skep die lêer edit.jsx vir redigering met die funksie EditStudent, waarin 'n vorm sal wees om data oor die student in te vul.