ในบทช่วยสอนนี้ ฉันใช้องค์ประกอบตามคลาส react และสมมติว่าคุณรู้พื้นฐานของ react

ฉันสร้างแบบฟอร์มเพื่อแสดงให้คุณเห็นและตอนนี้รหัสมีลักษณะดังนี้

ตอนนี้เริ่มส่วนตรรกะของมัน

1) สร้างความเหมาะสมของรัฐสำหรับฟิลด์อินพุตเหล่านี้และเชื่อมโยงกลับไปยังองค์ประกอบอินพุต

สร้างสมบัติของรัฐแบบนี้

ตัวสร้าง (อุปกรณ์ประกอบฉาก) {

ซุปเปอร์ (อุปกรณ์ประกอบฉาก)

.state นี้ = {

// เขียนคำว่ากระต่าย

};};

ตอนนี้ทำลายโครงสร้างและกำหนดค่าให้กับวิธีการแสดงผลเช่นนี้

2) เพิ่ม on change handler เพื่อติดตามการเปลี่ยนแปลงของค่าอินพุต

เมื่อค่าอินพุตเปลี่ยนแปลง ฟังก์ชัน changeHandler จะถูกเรียก

ตั้งค่าสถานะ

ใช้งานฟังก์ชั่นเช่นนี้

3) ตอนนี้ส่งข้อมูลแบบฟอร์มนี้โดยใช้ตัวจัดการการส่ง

สำหรับสิ่งนี้ ฉันสร้างปุ่มส่งในแบบฟอร์ม

จัดการแบบฟอร์มส่งข้อมูลโดย submitHnadler แบบนี้

ตอนนี้ใช้ sendHnadler และใน submitHandler คุณต้องเขียนบรรทัดนี้ว่า “ e.preventDefault() ” เพื่อหลีกเลี่ยงการรีเฟรชหน้า

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

4) ส่งข้อมูลไปยังฐานข้อมูลไปยัง axios

นำเข้า axios ก่อนโดย“ นำเข้า axios จาก 'axios' ”

ตอนนี้ใน submitHandler เราทำการร้องขอการโพสต์เช่นนี้

ขอบคุณที่อ่านสิ่งนี้ ฉันหวังว่านี่จะช่วยคุณในการเดินทาง React ของคุณ 🎉