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

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

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

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

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

<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

เปิดแอปพลิเคชันนักเรียนของคุณ ในไฟล์ NewStudentForm.jsx สร้าง รายการแบบดรอปดาวน์ teachersList ด้วย map ซึ่งจะมีชื่อ-นามสกุล ของอาจารย์ ดังที่แสดงในบทเรียน

ทำการเปลี่ยนแปลงในการจัดวาง โดยเพิ่ม บล็อกอีกหนึ่งบล็อกสำหรับแสดงรายการแบบดรอปดาวน์ ที่มีอาจารย์

รันแอปพลิเคชันของคุณ ในฟอร์ม สำหรับเพิ่มนักเรียนของคุณควรมี รายการแบบดรอปดาวน์ที่มีอาจารย์ปรากฏขึ้น ซึ่งคุณทำในงานก่อนหน้านี้