ทำไมต้องระบุ Type ให้ Event Handler
เวลาเราเขียน React ด้วย TypeScript (ภาษาที่เพิ่มระบบตรวจสอบชนิดข้อมูลให้ JavaScript) เรามักจะเจอปัญหาว่าโค้ดแจ้งเตือน Error สีแดง ทั้งที่เขียนถูกหลักการแล้ว นั่นเพราะตัวโปรแกรมไม่รู้ว่าข้อมูลที่ส่งเข้ามาในฟังก์ชันเป็นแบบไหนกันแน่
ลองนึกภาพเหมือนเราเป็นพนักงานรับพัสดุ ถ้ามีคนส่งกล่องมาให้แต่ไม่แปะป้ายบอกว่าข้างในคืออะไร เราก็คงงงว่าจะจัดการกับมันยังไง จะให้โยนหรือต้องวางเบาๆ ถ้าเราไม่ระบุ Type (ชนิดของข้อมูล) ให้ชัดเจน คอมพิวเตอร์ก็เดาไม่ถูกเหมือนกัน
การระบุ Event Handling (การจัดการเหตุการณ์ที่ผู้ใช้กระทำกับหน้าเว็บ) ให้ถูกต้องจะช่วยให้เราเขียนโค้ดได้แม่นยำขึ้น โปรแกรมจะช่วยเตือนเราทันทีถ้าเราพยายามดึงข้อมูลผิดที่ หรือเรียกใช้คำสั่งที่ไม่รองรับ
// ตัวอย่างแบบที่ TypeScript งง เพราะไม่รู้ว่า e คืออะไร
const handleClick = (e) => {
console.log(e.target.value); // ตรงนี้จะขึ้น Error เพราะ e ไม่มี type
};จัดการเหตุการณ์คลิกด้วย React.MouseEvent
เวลาผู้ใช้กดปุ่มหรือคลิกเมาส์บนหน้าเว็บ เราจะใช้ React.MouseEvent เพื่อบอกให้โปรแกรมรู้ว่านี่คือเหตุการณ์ที่เกิดจากการคลิก การระบุแบบนี้จะช่วยให้เราเข้าถึงข้อมูลตำแหน่งเมาส์หรือปุ่มที่กดได้ง่ายและปลอดภัย
ลองเปรียบเทียบเหมือนเรามีปุ่มกดกริ่งหน้าบ้าน ถ้าเรารู้ว่าเป็นกริ่ง เราก็แค่กด แต่ถ้าเราไม่รู้ว่ามันคืออะไร เราอาจจะเผลอไปทำอย่างอื่นที่ทำให้ระบบรวนได้ การใส่ Type ให้มันจึงเหมือนการติดป้ายชื่อที่ปุ่มนั้นไว้
เมื่อเราใส่ React.MouseEvent เข้าไป ตัว IDE (โปรแกรมที่ใช้เขียนโค้ด) จะแสดงรายการคำสั่งที่เราดึงออกมาใช้ได้ทันที เช่น เราอยากรู้ว่าเมาส์คลิกที่จุดไหนบนหน้าจอ หรือกดปุ่มไหนบนคีย์บอร์ดค้างไว้ขณะคลิก
// การใส่ Type ให้กับเหตุการณ์การคลิก
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
console.log("ปุ่มถูกกดแล้ว", event.currentTarget.innerText);
};
<button onClick={handleClick}>กดฉันสิ</button>รับค่าจากช่องพิมพ์ด้วย React.ChangeEvent
เวลาเราทำช่องกรอกข้อมูลหรือ <input> เราต้องใช้ React.ChangeEvent เพื่อดึงค่าที่ผู้ใช้พิมพ์เข้ามาในช่องนั้น หากไม่ระบุ Type ให้ดี เราจะเข้าถึงค่า value (ค่าที่อยู่ในช่องพิมพ์) ไม่ได้
ให้คิดว่ามันเหมือนการรับแบบฟอร์มที่มีช่องให้กรอกชื่อ ถ้าเราไม่ระบุว่าช่องนี้คือ "ช่องกรอกชื่อ" เราอาจจะไปหยิบข้อมูลจากช่องอื่นมาแทน การระบุ HTMLInputElement จะช่วยยืนยันว่าเรากำลังคุยกับช่องกรอกข้อมูลที่เป็น Input เท่านั้น
นี่คือจุดที่มือใหม่พลาดบ่อยที่สุด คือการลืมระบุว่า Event นี้มาจากช่องประเภทไหน ถ้าเราไม่ระบุ HTMLInputElement ตัวโปรแกรมจะมองว่ามันเป็นแค่เหตุการณ์ทั่วไป ทำให้เราเข้าถึงคุณสมบัติของช่องพิมพ์ไม่ได้
// การใส่ Type ให้กับการเปลี่ยนแปลงในช่องพิมพ์
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log("ค่าที่พิมพ์คือ:", e.target.value);
};
<input type="text" onChange={handleChange} />ใช้ Inline Handlers ให้สะอาดและปลอดภัย
บางครั้งเราไม่อยากแยกฟังก์ชันออกมาข้างนอก เราจึงเขียนฟังก์ชันไว้ใน onClick หรือ onChange โดยตรง ซึ่งเราเรียกว่า Inline Handlers (การเขียนฟังก์ชันจัดการเหตุการณ์ไว้ในแท็ก HTML เลย) วิธีนี้สะดวกแต่ต้องระวังเรื่องการระบุ Type
การเขียนแบบนี้ทำให้เราไม่ต้องสร้างชื่อฟังก์ชันใหม่ให้รก Component (ส่วนประกอบย่อยของหน้าเว็บ) แต่ข้อเสียคือถ้าเขียนซับซ้อนเกินไปจะอ่านยาก ดังนั้นควรใช้กับงานง่ายๆ ที่มีบรรทัดเดียวจะดีที่สุด
ข้อดีคือเราไม่ต้องกังวลเรื่องการส่ง Type ไปมาให้วุ่นวาย เพราะ React จะเดา Type ให้เราเองโดยอัตโนมัติจากตัวแท็กที่เราเขียน แต่มันก็มีขีดจำกัดหากเราต้องการทำอะไรที่ซับซ้อนกว่าการรับค่าทั่วไป
// การเขียนแบบ Inline ที่สะอาดและปลอดภัย
<button onClick={(e: React.MouseEvent<HTMLButtonElement>) => console.log(e)}>
คลิกเลย
</button>จุดที่มือใหม่มักพลาดและวิธีแก้ไข
ข้อผิดพลาดที่เจอบ่อยคือการเดา Type มั่วๆ หรือการใช้ any (ชนิดข้อมูลอะไรก็ได้) เพื่อเลี่ยงปัญหา การใช้ any เหมือนการปิดตาขับรถ เพราะมันจะทำให้ระบบตรวจสอบของ TypeScript ทำงานไม่ได้ผลเลย
อีกจุดคือการลืมใส่ Type ให้กับ Event แล้วพยายามเข้าถึง target (ส่วนประกอบที่เป็นต้นเหตุของเหตุการณ์) แล้วโปรแกรมฟ้องว่าหาไม่เจอ วิธีแก้คือให้หยุดดูว่าเรากำลังใช้แท็กอะไรอยู่ แล้วใส่ Type ให้ตรงกับแท็กนั้น
หากไม่แน่ใจว่าต้องใช้ Type อะไร ให้ลองเอาเมาส์ไปชี้ที่คำว่า onClick ใน IDE แล้วดูว่ามันแนะนำ Type อะไรออกมา นั่นคือวิธีที่ง่ายที่สุดในการเรียนรู้และจดจำโดยไม่ต้องเปิดตำรา
// แบบที่ผิด: การใช้ any ทำให้เราเสียประโยชน์จาก TypeScript
const handleWrong = (e: any) => {
console.log(e.target.value); // อันตราย เพราะไม่มีการตรวจสอบข้อมูล
};สรุป: การนำไปใช้จริงในโปรเจกต์
การระบุ Type ให้ Event Handlers ไม่ใช่เรื่องยาก แต่เป็นหัวใจสำคัญของการเขียนโค้ดที่ทนทานและแก้บั๊กได้ง่าย เมื่อคุณเริ่มสร้างโปรเจกต์แรก ให้ฝึกใส่ Type ให้เป็นนิสัยตั้งแต่บรรทัดแรกที่เขียน
สมมติว่าคุณกำลังทำ Login Form (แบบฟอร์มเข้าสู่ระบบ) คุณต้องใช้ React.ChangeEvent<HTMLInputElement> ในการรับข้อมูลจากช่องอีเมลและรหัสผ่าน และใช้ React.FormEvent<HTMLFormElement> ในการจัดการตอนกดปุ่มส่งข้อมูล
การฝึกเขียนให้ถูกต้องตั้งแต่เริ่มจะทำให้คุณไม่ต้องมานั่งแก้โค้ดนับร้อยบรรทัดในตอนหลัง ขอให้จำไว้ว่า TypeScript คือเพื่อนร่วมงานที่คอยเตือนเรา ไม่ใช่ศัตรูที่คอยขวางทาง ยิ่งคุณคุยกับมันรู้เรื่องมากเท่าไหร่ งานของคุณก็จะยิ่งเสร็จไวและมีคุณภาพมากขึ้นเท่านั้น
