การแก้ไขฟอร์มใน Redux

ในบทเรียนนี้ เราจะทำงานให้เสร็จ เกี่ยวกับการแสดงข้อมูลผู้ขายในฟอร์ม สำหรับเพิ่มผลิตภัณฑ์ สำหรับสิ่งนี้ เราเหลือเพียงแค่แก้ไขการจัดวางฟอร์มเล็กน้อย

เปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้นไฟล์ NewProductForm.jsx มา ก่อนคำสั่ง return เพิ่มโค้ดส่วนหนึ่ง สำหรับการจัดวางรายการแบบดรอปดาวน์ ซึ่ง เราจะใช้เลือกผู้ขาย เราจะทำมันผ่าน วิธีมาตรฐานด้วย map:

products/NewProductForm.jsxconst sellersList = sellers.map((seller) => (
  <option key={seller.id} value={seller.id}>
    {seller.name}
  </option>
))

และตอนนี้เราจะทำการเปลี่ยนแปลงในการจัดวางเอง สำหรับสิ่งนี้ในฟอร์มระหว่างย่อหน้าแรกและที่สอง (ระหว่างบล็อกการจัดวางสำหรับชื่อ และคำอธิบายผลิตภัณฑ์) แทรกย่อหน้าที่มี การจัดวางดังต่อไปนี้:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">ผู้ขาย:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

ตอนนี้เราสามารถรันแอปพลิเคชันของเราได้แล้ว ในฟอร์มสำหรับเพิ่มจะมีรายการ ผู้ขายปรากฏขึ้น ลองกรอกข้อมูล ฟอร์ม เลือกหนึ่งในนั้นและ คลิกที่ปุ่มบันทึก ตอนนี้ หากเราดูใน Redux DevTools เรา จะเห็นการเปลี่ยนแปลง - ในผลิตภัณฑ์ ที่เพิ่มใหม่มีคุณสมบัติ seller พร้อมกับ id ของผู้ขายที่เลือก เป็นค่า นอกจากนี้ในแท็บ State ตอนนี้จะแสดงสองสไลซ์ products และ sellers