React Router හි URL පරාමිතීන් භාවිතයෙන් දත්ත ලිවීම සහ සංස්කරණය කිරීම

අපගේ යෙදුමට දැන් ගබඩාවෙන් එක් එක් නිෂ්පාදනය සඳහා දත්ත පූරණය කළ හැකිය. මෙම පාඩමෙන් අපි URL පරාමිතීන් ඔස්සේ නිෂ්පාදනය පිළිබඳ තොරතුරු එකතු කිරීම සහ සංස්කරණය කිරීම ක්‍රියාත්මක කිරීම ආරම්භ කරමු.

දත්ත ඇතුළු කිරීම හෝ වෙනස් කිරීම සඳහා අපි නැවතත් Form සංරචකය භාවිතා කරමු. පළමුව අපි product.jsx විවෘත කර අවසාන ඡේදයට පසුව (ෆයිලයට Form ආයාත කිරීමට අමතක නොකරන්න) නිෂ්පාදන දත්ත සංස්කරණය කිරීම සඳහා බොත්තමක් අවසාන ආකෘතියට එක් කරමු:

<Form action="edit">
	<button type="submit">සංස්කරණය</button>
</Form>

දැන් අපගේ නිෂ්පාදන පිටුවේ සංස්කරණ බොත්තමක් ඇත. ඊළඟට, අපි මෙම බොත්තම එබූ විට අපව දත්ත ඇතුළු කළ හැකි පෝරමය සහිත පිටුවකට හරවා යැවීමට සකස් කරමු. මේ සඳහා, අපි තවත් එක් මාර්ගයක් සාදමු products/:productId/edit සමඟ. අපි මේ සඳහා රූප සටහනක් සාදමු.

ඉතින්, routes ෆෝල්ඩරය තුළ අපි නව ෆයිලයක් සාදමු edit.jsx. මෙහි අපට පූරණය කිරීම සඳහා name, cost සහ amount ක්ෂේත්‍ර සහිත පෝරමයක් සහ එකතු කිරීමේ බොත්තමක් ඇත. මේ සියල්ල EditProduct සංරචකය තුළ ඇත. ඊළඟ පාඩම්වලට අවශ්‍ය වන බැවින් name ගුණාංග අනිවාර්යයෙන්ම ලියන්න:

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

function EditProduct() {
	return (
		<Form method="post" id="product-form">
			<div>
				<span>නම:</span>
				<input placeholder="නම" type="text" name="name" />
			</div>
			<div>
				<span>වියදම:</span>
				<input placeholder="වියදම" type="text" name="cost" />
			</div>
			<div>
				<span>ප්‍රමාණය:</span>
				<input placeholder="ප්‍රමාණය" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">සුරැකීම</button>
			</p>
		</Form>
	);
}

export default EditProduct;

කලින් පාඩම් සඳහා වන කාර්යයන්හිදී ඔබ විසින් සාදන ලද යෙදුම ගන්න. පාඩමේ ද්‍රව්ය භාවිතා කරමින්, ශිෂ්‍ය දත්ත සංස්කරණය කිරීමේ බොත්තම එක් කරන්න. සංස්කරණය සඳහා edit.jsx ෆයිලය සාදන්න EditStudent ශ්‍රිතය සමඟ, එහි ශිෂ්‍යයා පිළිබඳ දත්ත පූරණය කිරීම සඳහා පෝරමයක් ඇත.