ออบเจ็กต์ Event ใน React

ภายในฟังก์ชันที่เชื่อมกับตัวจัดการเหตุการณ์ สามารถเข้าถึงออบเจ็กต์ Event ได้:

function App() {
	function func(event) {
		console.log(event); // ออบเจ็กต์ที่มีเหตุการณ์
	}
	
	return <div>
		<button onClick={func}>ดำเนินการ</button>
	</div>;
}

ค่าที่อยู่ในตัวแปร event นั้นไม่ใช่ออบเจ็กต์ Event ดั้งเดิมของเบราว์เซอร์ แต่เป็น เสมือนวัตถุพิเศษที่ React สร้างครอบอยู่ เรียกว่า SyntheticEvent เสมือนวัตถุนี้ช่วยให้เหตุการณ์ทำงานเหมือนกัน ในทุกเบราว์เซอร์ มันมีอินเทอร์เฟซเหมือนกัน กับเหตุการณ์ดั้งเดิม รวมถึงเมธอด stopPropagation และ preventDefault ด้วย

กำหนดให้มีปุ่ม เมื่อคลิกที่ปุ่มนั้น ให้รับออบเจ็กต์ Event และแสดงในคอนโซล

กำหนดให้มีปุ่ม เมื่อคลิกที่ปุ่มนั้น ให้แสดง ค่า event.target ของการคลิกในคอนโซล