สว่างกระจ่างใจมลกับ Handle Events in React ( Part 1 )

ผมเชื่อว่าคนที่เริ่มต้นเขียน React ใหม่ๆจะมีข้อสงสัยเกี่ยวกับการ Handle events ใน react ว่าเห้ยเราจะต้องเขียนอย่างไร หรือบางทีก็ไม่เข้าใจว่าทำไมมันเขียนได้หลายแบบเหลือเกิน ทำไมต้องเขียนเเบบนั้น 
ยิ่งคนที่เริ่มเขียน Javascript ใหม่ๆจะงงเป็นพิเศษ หลังจากอ่านบทความนี้จบจะช่วยให้ความสงสัยของคุณหายไป ( มั้ง ผมหวังเช่นนั้น )

เรามาเริ่มกันที่ตัวอย่างง่ายๆ สมมติเราต้องการสร้าง input ที่เมื่อมีการเปลี่ยนแปลงค่าจะทำการ console.log อะไรสักอย่างออกมา เราก็จะได้ code ออกมาหน้าตาประมาณนี้

คำถามคือเราจะนำเมธอด handleChange ที่เราสร้างขึ้นมาไว้ด้านบน 
ใส่ลงไปใน onChange ซึ่งเป็น property ของเราอย่างไร บางคนก็จะตอบว่าก็ใส่ไปดื้อๆเลยสิจะไปยากอะไร

onChange = { this.handleChange }

ซึ่งเป็นคำตอบที่ผิด ถ้าเราอยากให้มันทำงานได้ถูกต้องเราต้องทำการ bind ค่า this จาก function มาสู่ class ของเราด้วย ทำให้ได้ code ออกมาหน้าตาเช่นนี้

ซึ่งหากเราอยากนำมันไปใช้หลายๆ ครั้งก็ให้ทำการประกาศตัวแปรไว้ด้านบนแบบนี้

เเต่มันยังไม่จบเพียงเท่านั้นเพราะบางคนก็บอกว่า เอ๊ะเเต่เราเห็นมันเขียนเเบบนี้ได้ด้วยนะ

ซึ่งตัวอย่างดังด้านบนจะให้ผลการทำงานถูกต้องเหมือนกับตัวอย่างก่อนหน้านี้
เพราะ จาก code เราได้ทำการสร้าง Anonymous Function ซึ่งจะทำการ bind ค่าของ this ให้เราโดยอัตโนมัติ

หลังจากที่อ่านมาถึงจุดนี้ ผมอยากจะบอกทุกท่านครับ ว่าวิธีที่ผ่านมาทั้งหมดเป็นวิธีที่ไม่สมควรทำ ( อ้าว ! หลอกให้อ่านตั้งนาน ) เพราะอะไรเราจะไปดูต่อกันใน part หน้าครับ

หากมีอะไรผิดพลาดก็ต้องขออภัยมา ณ ที่นี้ด้วยครับ ขอบคุณครับ