เพิ่มฟิลด์ใหม่ลงในแบบฟอร์มแบบไดนามิกด้วย React.js

เมื่อเร็ว ๆ นี้ฉันทำงานในโครงการที่ฉันต้องเพิ่มฟิลด์แบบมีเงื่อนไขในแบบฟอร์มและอนุญาตให้ผู้ใช้เพิ่มฟิลด์เพิ่มเติมได้ทันทีตามที่ต้องการ ในตอนแรก ดูเหมือนว่าจะยากและเหมือนฉันเป็นนักพัฒนาที่ขี้เกียจ ฉันค้นหาใน Google เพื่อดูว่ามีใครเคยทำสิ่งที่คล้ายกันนี้หรือไม่ แต่ฉันไม่พบเลย ดังนั้นฉันจึงเริ่มสร้างใหม่ตั้งแต่ต้น สิ่งต่อไปนี้คือความพยายามที่ไร้เดียงสาของฉันในการแก้ปัญหาที่อธิบายไว้ นี่ไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบและฉันต้องการรับคำติชมเกี่ยวกับวิธีทำให้ดีขึ้น

สิ่งแรกที่ฉันทำคือแบ่งปัญหาออกเป็นชิ้นเล็กๆ เพื่อให้ฉันคิดได้ดีขึ้น ฉันสังเกตเห็นว่าแบบฟอร์มจำเป็นต้องทำบางสิ่ง

1. สร้างบรรทัดฟอร์มใหม่
2. สร้างฟิลด์ใหม่และเพิ่มฟิลด์ในบรรทัดใหม่ที่สร้างขึ้น
3. เพิ่มบรรทัดใหม่ในแบบฟอร์มเดิม
4. จัดการสถานะของรายการโฆษณาจากแบบฟอร์ม

ดังนั้นฉันจึงดำเนินการต่อและสร้างส่วนประกอบเพื่อแสดงขั้นตอนที่สรุปไว้ด้านบน ก่อนอื่นฉันสร้างฟิลด์ตามที่แสดงในข้อมูลโค้ดด้านล่าง

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

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

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

เพื่อแก้ไขปัญหานั้น ฉันตัดสินใจว่าการกดสถานะขององค์ประกอบเส้นไปยังองค์ประกอบหลักบนความเบลอของแต่ละฟิลด์จะเป็นแนวทางที่ดีที่สุดที่นี่ เพื่อให้บรรลุเป้าหมายนี้ เราจะต้องรักษารายการของรายการที่ให้ส่วนประกอบเพิ่มรายการใหม่ลงในรายการและแก้ไขรายการในรายการ ในการทำเช่นนี้ ฉันต้องเพิ่มฟิลด์ดัชนีให้กับสถานะของแต่ละรายการโฆษณา เพื่อให้ฉันสามารถค้นหาและแก้ไขได้อย่างง่ายดายเมื่อจำเป็น ฉันแก้ไขคอมโพเนนต์ FormLine เพื่อใช้ฟังก์ชันที่ส่งต่อสถานะไปยังองค์ประกอบหลักเป็นอุปกรณ์ประกอบฉาก

ในองค์ประกอบหลัก FormLineItems ฉันเขียนฟังก์ชัน pushItem และส่งต่อไปยังส่วนประกอบเป็นอุปกรณ์ประกอบฉาก ตอนนี้ส่วนประกอบมีลักษณะดังนี้:

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

คุณสามารถค้นหารหัสสำหรับบทความนี้ได้ที่https://gist.github.com/vdugeri/0a9f1972b80918b624e71b9aab35cb8e