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

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

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

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

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

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

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

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