Event Handling ใน React: จัดการเหตุการณ์แบบมือโปร

การจัดการ event ใน React ทำได้ง่ายและปลอดภัยกว่าการใช้ JavaScript ธรรมดา เพราะทุกอย่างอยู่ในรูปแบบของ JSX และ function

---

1. การกำหนด event handler

function ClickMe() {
  function handleClick() {
    alert("คุณคลิกปุ่ม!");
  }
  return <button onClick={handleClick}>คลิกฉัน</button>;
}

---

2. การส่ง parameter ให้ event handler

function DeleteButton({ id, onDelete }) {
  return (
    <button onClick={() => onDelete(id)}>
      ลบ
    </button>
  );
}

อธิบาย:
ใช้ arrow function เพื่อส่ง parameter เข้าไปใน handler

---

3. ตัวอย่าง event ยอดนิยม

• onClick สำหรับปุ่ม
• onChange สำหรับ input
• onSubmit สำหรับ form

import { useState } from "react";

function FormExample() {
  const [email, setEmail] = useState("");
  function handleSubmit(e) {
    e.preventDefault();
    alert(`ส่งอีเมล: ${email}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="อีเมล"
      />
      <button type="submit">ส่ง</button>
    </form>
  );
}

---

4. Best Practices

• อย่าใส่วงเล็บหลังชื่อ function ใน JSX เช่น onClick={handleClick} ไม่ใช่ onClick={handleClick()}
• ถ้าต้องส่ง parameter ให้ใช้ arrow function
• ใช้ชื่อ function ที่สื่อความหมาย เช่น handleClick, handleChange

---

สรุป

Event handling ใน React ช่วยให้โค้ดของคุณอ่านง่าย ควบคุม UI ได้อย่างยืดหยุ่น และลดโอกาสเกิดบั๊กจากการจัดการ event แบบเดิม ๆ