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

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

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

routes/product.jsx<Form action="edit">
  <button type="submit">edit</button>
</Form>

ตอนนี้เรามีปุ่มแก้ไขบนหน้าสินค้าแล้ว ต่อไปเราจะทำให้เมื่อกดปุ่มนี้ จะพาเราไปยังหน้าที่มีแบบฟอร์มซึ่งเราสามารถป้อนข้อมูลได้ สำหรับสิ่งนี้ เราจะสร้างเส้นทางเพิ่มเติมด้วย products/:productId/edit มาสร้างเลย์เอาต์สำหรับสิ่งนี้กัน

ดังนั้น ในโฟลเดอร์ routes เราจะสร้างไฟล์ใหม่ชื่อ edit.jsx ที่นี่เราจะมีแบบฟอร์มพร้อมช่องสำหรับกรอก name, cost และ amount พร้อมกับปุ่มบันทึก ทั้งหมดนี้จะอยู่ในคอมโพเนนต์ EditProduct อย่าลืมกำหนดแอตทริบิวต์ name ซึ่งเราจะต้องใช้ในบทเรียนถัดไป:

routes/edit.jsximport { 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;