การผูกเหตุการณ์ใน JSX

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

สมมติว่ามีฟังก์ชัน showMess ที่แสดง alert พร้อมข้อความ และในโค้ด HTML มีปุ่มที่เราอยากให้เห็น alert นี้ เมื่อคลิกที่ปุ่ม:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

ลองผูกเหตุการณ์ onclick กับปุ่มของเรา เพื่อให้เมื่อคลิกที่ div นี้ ฟังก์ชัน showMess จะทำงาน สำหรับสิ่งนี้ต้อง เพิ่มแอตทริบิวต์ onClick (เขียนในรูปแบบ camelCase นั่นคือ onClick ไม่ใช่ onclick) และภายในให้ระบุฟังก์ชันที่จะทำงาน เมื่อเกิดเหตุการณ์นี้:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

นี่คือวิธีการทำงานกับเหตุการณ์: เพิ่มแอตทริบิวต์ (เช่น onClick หรือ onFocus) โดยกำหนดค่าแอตทริบิวต์เป็น เมธอดที่จะถูกเรียกเมื่อเกิดเหตุการณ์นั้น

โค้ดต่อไปนี้กำหนดให้:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

ทำให้เมื่อคลิกที่ปุ่มแรก ฟังก์ชันแรกทำงาน และเมื่อคลิกที่ ปุ่มที่สอง - ฟังก์ชันที่สองทำงาน