การบันทึกและแก้ไขข้อมูลผ่านพารามิเตอร์ URL ใน React Router

แอปพลิเคชันของเราสามารถโหลดข้อมูลสำหรับสินค้าแต่ละรายการจากที่เก็บข้อมูลได้แล้ว ในบทเรียนนี้ เราจะเริ่มต้นนำการเพิ่มข้อมูลสินค้าและแก้ไขข้อมูลผ่านพารามิเตอร์ URL

เพื่อที่จะบันทึกหรือเปลี่ยนแปลงข้อมูล เราจะใช้คอมโพเนนต์ Form อีกครั้ง เริ่มต้นให้เราเปิดไฟล์ product.jsx และเพิ่มปุ่มสำหรับแก้ไขข้อมูลสินค้าในส่วนท้ายของมาร์กอัป - หลังจากย่อหน้าสุดท้าย (อย่าลืมนำเข้า Form ในไฟล์):

<Form action="edit">
	<button type="submit">edit</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>Name:</span>
				<input placeholder="name" type="text" name="name" />
			</div>
			<div>
				<span>Cost:</span>
				<input placeholder="cost" type="text" name="cost" />
			</div>
			<div>
				<span>Amount:</span>
				<input placeholder="amount" type="text" name="amount" />
			</div>
			<p>
				<button type="submit">save</button>
			</p>
		</Form>
	);
}

export default EditProduct;

นำแอปพลิเคชันที่คุณสร้างขึ้นในการมอบหมายงานของบทเรียนที่ผ่านมา ใช้เนื้อหาจากบทเรียน เพิ่มปุ่มแก้ไขข้อมูลนักศึกษา สร้างไฟล์ edit.jsx สำหรับการแก้ไขด้วยฟังก์ชัน EditStudent ซึ่งภายในจะมีแบบฟอร์มสำหรับกรอกข้อมูลเกี่ยวกับนักศึกษา