Mission 2: Event Handling

เป้าหมายของ Mission นี้: จัดการ Event onClick และ onChange

flowchart LR
    U["ผู้ใช้คลิก/พิมพ์"] --> E["Event เกิดขึ้น (onClick/onChange)"]
    E --> H["ฟังก์ชันที่ผูกไว้ทำงาน"]
    H --> S["อัปเดต state ด้วย setState"]

onClick — ทำงานตอนคลิก

<button onClick={() => alert("คลิกแล้ว!")}>กดฉัน</button>

onChange — ทำงานตอนค่าของ input เปลี่ยน

<input onChange={(e) => console.log(e.target.value)} />

ใช้คู่กับ useState

"use client";
import { useState } from "react";

function Example() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>บวก 1 (ตอนนี้: {count})</button>;
}

ข้อผิดพลาดที่พบบ่อย: เขียน onClick={setCount(count + 1)} (ไม่มี () => ครอบ) — โค้ด จะรันทันทีตอนหน้าเว็บโหลด ไม่ใช่ตอนคลิก ต้องห่อด้วย arrow function เสมอ: onClick={() => setCount(count + 1)}

คำศัพท์สำคัญ