หลังจากที่เราลองสร้าง class component และใช้งาน props มาในบทความก่อนหน้านี้ รอบนี้จะเป็นการใช้ handle event ของ form control และการ ใช้งาน state เบื้องต้น state จะใช้ได้ใน class component เท่านั้น และ state สามารถเปลี่ยนแปลงแก้ไขค่าได้ อีกทั้งยังมี life cycle ของ class มาเกี่ยวข้อง ส่วน function component จะไม่มีการใช้ state ซึ่งการใช้งาน state นั้นจะต้องถูกกำหนดค่าหรือ state เริ่มต้นที่ constructor ของ class component อีกทั้งยังต้องใช้คำสั่ง super ใน constructor อีกด้วยไม่นั้นจะ error ซึ่งเป็นข้อบังคับของทาง React.js เอาละเรามาดูอย่างโค้ดกันเลยดีกว่าโดยผมจะตัดเอาโค้ดในส่วนที่อยู่ในส่วน tag script มานะครับ โดนเริ่มแรกผมจะทำการสร้าง method ทีมีชื่อว่า handleInputChange ใน ClassBasedCompont ตามโค้ดเลยครับ จากนั้นในส่วนของ render ให้เพิ่ม textbox ขึ้นมา 1 อันกำหนดชื่อว่า message จากนั้นกำหนด onChange ให้ทำการเรียกใช้งาน handleInputChange ตามโค้ดด้านล่างเลยครับ **สามารถใช้โค้ดเก่าของบทความก่อนหน้า หรือ download code ได้ จาก Link นี้ครับ เมื่อลองรันแล้วพิมพ์ข้อความใน textbox ก็จะเห็นว่ามีการเรียกใช้งาน handleInputChange ที่นี้ลองแก้ handleInputChange ให้มี param event แล้วทำการ console.log ค่า event.target.name จะเห็นว่าเราสามารถอ้างอิงชื่อ control จาก event.target.name หรือถ้าเราต้องการค่า value ก็จะใช้คำสั่ง event.target.valueRead More →