Mission 2: Select, Checkbox & Radio

เป้าหมายของ Mission นี้: รู้จัก Select, Checkbox, และ Radio แบบ Controlled Component

flowchart LR
    SEL["select: value/onChange"] --> ST["state"]
    CHK["checkbox: checked/onChange"] --> ST
    RAD["radio (name เดียวกัน): checked/onChange"] --> ST

Select

<select value={level} onChange={(e) => setLevel(e.target.value)}>
  <option value="junior">Junior</option>
  <option value="mid">Mid</option>
  <option value="senior">Senior</option>
</select>

Checkbox

ใช้ checked แทน value, อ่านค่าจาก e.target.checked (true/false)

<input
  type="checkbox"
  checked={agree}
  onChange={(e) => setAgree(e.target.checked)}
/>

Radio

radio หลายปุ่มที่ "เลือกได้แค่อันเดียว" ต้องมี name เดียวกันทุกปุ่ม

<input
  type="radio"
  name="gender"
  value="male"
  checked={gender === "male"}
  onChange={(e) => setGender(e.target.value)}
/>
<input
  type="radio"
  name="gender"
  value="female"
  checked={gender === "female"}
  onChange={(e) => setGender(e.target.value)}
/>

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