Mission 1: Input, Textarea & Controlled Component

เป้าหมายของ Mission นี้: รู้จัก Controlled Component ผ่าน Input และ Textarea

Controlled Component คืออะไร

ปกติ <input> ธรรมดาจะเก็บค่าที่พิมพ์ไว้ในตัวมันเอง — แต่ใน React เรานิยมให้ state เป็นคน คุมค่า ของ input แทน เรียกว่า Controlled Component: ส่ง value เข้าไป (ค่าปัจจุบันมาจาก state) แล้วใช้ onChange อัปเดต state ทุกครั้งที่พิมพ์

flowchart LR
    U["ผู้ใช้พิมพ์ใน input"] --> C["onChange ทำงาน"]
    C --> S["setName(e.target.value)"]
    S --> V["state name อัปเดต"]
    V --> I["input แสดงค่าจาก value={name}"]

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

function NameInput() {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="ชื่อของคุณ"
    />
  );
}

Textarea

เหมือน input แต่พิมพ์ข้อความยาวหลายบรรทัดได้ — หลักการเดียวกันเป๊ะ

<textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={4} />

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