React Router-da URL parametrleri boýunça maglumat ýazmak we redaktirlemek

Indi bizniň aplikasiýamyz her bir aýratyn önümiň maglumatlaryny ammaryndan ýüklemegi başardy. Bu sapakda biz URL parametrleri boýunça önüm hakda maglumat goşmak we ony redaktirlemegi amala aşyrmaga başlarys.

Maglumatlary goşmak ýa-da üýtgetmek üçin biz ýene Form komponentini ulanarys. Başlangyç üçin geliň product.jsx faýlyny açalyň we web-sahypanyň ahyrynda önümiň maglumatlaryny redaktirlemek üçin düwmä goşalyň - iň soňky abzasdan soň (faýla Form import etmegi ýatdan çykarmaň):

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

Indi bizde önüm sahypasynda redaktirleme düwmesi bar. Indiki etmeli zadymyz, bu düwmä basylan wagty bizi maglumatlary girip boljak formanyň ýerleşýän sahypasyna ugratmak. Munuň üçin biz ýene bir products/:productId/edit marşrutyny dörederis. Geliň munuň üçin maket döretmeli.

Şeýlelikde, routes bukjasynda biz täze edit.jsx faýlyny dörederis. Bu ýerde bizde doldurmak üçin name, cost we amount meýdanlary we ýatda saklamak düwmesi bolan forma bolmaly. Bu hemmesi EditProduct komponentinde bolmaly. Mätäç boljak name atributlaryny ýazmagy ýatdan çykarmaň:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>Ady:</span>
				<input placeholder="ady" type="text" name="name" />
			</div>
			<div>
				<span>Bahasy:</span>
				<input placeholder="bahasy" type="text" name="cost" />
			</div>
			<div>
				<span>Mukdary:</span>
				<input placeholder="mukdary" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">ýatda sakla</button>
			</p>
		</Form>
	);
}

export default EditProduct;

Öňki sapaklaryň wezipeleri üçin döreden aplikasiýaňyzy alyň. Sapagyň materyallaryndan peýdalanyp, talyba maglumatlaryny redaktirlemek düwmesini goşuň. Redaktirlemek üçin edit.jsx faýlyny dörediň, onda talyba hakda maglumatlary doldurmak üçin forma we EditStudent funksiýasy bolmaly.