# Lab 12: React #2 - useState & Events
## 🎯 วัตถุประสงค์
หลังจากทำ Lab นี้ เมื่อจบแล้ว นิสิตสามารถ:
- ใช้ useState Hook เพื่อจัดการ State
- ตอบสนองต่อ Events (onClick, onChange, onSubmit)
- สร้าง Controlled Components (ฟอร์มติดต่อ)
- แสดงผลตามเงื่อนไข (Conditional Rendering)
- สร้างแอปพลิเคชันที่มีปฏิสัมพันธ์กับผู้ใช้
---
## 📋 ส่วนที่ 1: useState Hook
### ขั้นตอน 1.1: สร้างโปรเจก React ใหม่
```bash
# สร้างโฟลเดอร์ lab12
mkdir lab12
cd lab12
# สร้างโครงการ React พร้อม Vite
npm create vite@latest my-react-app -- --template react
# เข้าโฟลเดอร์
cd my-react-app
# ติดตั้ง dependencies
npm install
# เริ่มต้นเซิร์ฟเวอร์
npm run dev
```
### ขั้นตอน 1.2: Counter App - ตัวแรก
สร้าง `src/App.jsx`:
```javascript
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
function reset() {
setCount(0);
}
return (
⏱️ ตัวนับ
{count}
);
}
```
**ตรวจสอบ:** ปุ่มสามารถเพิ่ม/ลด/รีเซ็ตค่า count ได้
### ขั้นตอน 1.3: Toggle Menu
เพิ่มลงใน App.jsx:
```javascript
function ToggleMenu() {
const [isOpen, setIsOpen] = useState(false);
return (
{isOpen && (
)}
);
}
```
แล้วแก้ไข Counter export:
```javascript
export default function App() {
return (
);
}
```
**ตรวจสอบ:** ปุ่มสามารถเปิด/ปิดเมนูได้
### ขั้นตอน 1.4: State เป็น Object
```javascript
function UserInfo() {
const [user, setUser] = useState({
firstName: "",
lastName: "",
age: "",
});
function updateFirstName(value) {
setUser({ ...user, firstName: value });
}
function updateLastName(value) {
setUser({ ...user, lastName: value });
}
function updateAge(value) {
setUser({ ...user, age: value });
}
return (
👤 ข้อมูลส่วนตัว
updateFirstName(e.target.value)}
placeholder="กรอกชื่อ"
style={{
display: "block",
padding: "8px",
marginTop: "5px",
width: "100%",
fontSize: "14px",
}}
/>
updateLastName(e.target.value)}
placeholder="กรอกนามสกุล"
style={{
display: "block",
padding: "8px",
marginTop: "5px",
width: "100%",
fontSize: "14px",
}}
/>
updateAge(e.target.value)}
placeholder="กรอกอายุ"
style={{
display: "block",
padding: "8px",
marginTop: "5px",
width: "100%",
fontSize: "14px",
}}
/>
ข้อมูลที่บันทึก:
ชื่อ: {user.firstName || "ยังไม่กรอก"}
นามสกุล: {user.lastName || "ยังไม่กรอก"}
อายุ: {user.age || "ยังไม่กรอก"}
);
}
```
เพิ่มใน App:
```javascript
export default function App() {
return (
);
}
```
---
## 📋 ส่วนที่ 2: Event Handling & Forms
### ขั้นตอน 2.1: Simple Input
```javascript
function InputExample() {
const [text, setText] = useState("");
return (
📝 กรอกข้อความ
setText(e.target.value)}
placeholder="พิมพ์อะไรสักอย่าง..."
style={{
display: "block",
padding: "10px",
fontSize: "16px",
width: "100%",
borderRadius: "4px",
border: "1px solid #ddd",
}}
/>
คุณพิมพ์: {text}
จำนวนตัวอักษร: {text.length}
);
}
```
### ขั้นตอน 2.2: Form Submit
```javascript
function LoginForm() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [submitted, setSubmitted] = useState(false);
function handleSubmit(event) {
event.preventDefault();
if (username.trim() && password.trim()) {
setSubmitted(true);
console.log("ข้อมูลที่ส่ง:", { username, password });
// รีเซ็ตหลังจาก 2 วินาที
setTimeout(() => {
setUsername("");
setPassword("");
setSubmitted(false);
}, 2000);
}
}
return (
);
}
```
เพิ่มใน App:
```javascript
export default function App() {
return (
);
}
```
---
## 📋 ส่วนที่ 3: Conditional Rendering
### ขั้นตอน 3.1: Ternary Operator
```javascript
function LoginStatus() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
{isLoggedIn ? (
🎉 ยินดีต้อนรับ!
คุณได้เข้าสู่ระบบแล้ว
) : (
🔒 กรุณาเข้าสู่ระบบ
)}
{hasMessage && (
📩 คุณมีข้อความใหม่!
)}
);
}
```
---
## 📋 ส่วนที่ 4: Todo App - Challenge
### ขั้นตอน 4.1: สร้าง Todo App
```javascript
function TodoApp() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState("");
function addTodo() {
if (input.trim()) {
const newTodo = {
id: Date.now(),
text: input,
completed: false,
};
setTodos([...todos, newTodo]);
setInput("");
}
}
function deleteTodo(id) {
setTodos(todos.filter((todo) => todo.id !== id));
}
function toggleTodo(id) {
setTodos(
todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo,
),
);
}
function handleKeyPress(e) {
if (e.key === "Enter") {
addTodo();
}
}
return (
📝 รายการที่ต้องทำ
{/* Input Section */}
setInput(e.target.value)}
onKeyPress={handleKeyPress}
placeholder="เพิ่มสิ่งที่ต้องทำ..."
style={{
flex: 1,
padding: "12px",
fontSize: "16px",
borderRadius: "4px",
border: "1px solid #ddd",
}}
/>
{/* Todo List */}
{/* Empty State */}
{todos.length === 0 && (
ยังไม่มีรายการ เพิ่มเลย! 🎯
)}
{/* Stats */}
{todos.length > 0 && (
{todos.filter((t) => t.completed).length} / {todos.length}{" "}
สำเร็จแล้ว
)}
);
}
```
เพิ่มใน App:
```javascript
export default function App() {
return (
);
}
```
**ตรวจสอบ:**
- สามารถเพิ่ม todo ได้
- สามารถทำเครื่องหมาย todo ว่าสำเร็จได้
- สามารถลบ todo ได้
- แสดงสถิติการสำเร็จ
---
## Checklist - ตรวจสอบความสำเร็จ
- [ ] ใช้ useState Hook สร้าง Counter ได้
- [ ] ใช้ useState สร้าง Toggle Menu ได้
- [ ] สร้าง State เป็น Object สำเร็จ
- [ ] จัดการ Input onChange ได้
- [ ] สร้าง Form Submit ปกติ
- [ ] ใช้ Ternary Operator สำหรับ Conditional Rendering
- [ ] ใช้ Logical AND (&&) สำหรับแสดง/ซ่อน elements
- [ ] สร้าง Todo App ครบถ้วน
- [ ] เบราว์เซอร์แสดงผลถูกต้องโดยไม่มี error
- [ ] สามารถใช้ Enter key เพื่อเพิ่ม todo ได้
---
## 🧪 การทดสอบ (Testing)
### ทดสอบ 1: Counter
- กดปุ่ม "เพิ่ม" 5 ครั้ง ตรวจสอบค่า
- กดปุ่ม "ลด" 3 ครั้ง ตรวจสอบค่า
- กดปุ่ม "รีเซ็ต" ตรวจสอบว่ากลับเป็น 0
### ทดสอบ 2: Form
- กรอก username และ password
- ส่ง form ตรวจสอบ console.log
- ลองส่ง form ที่ว่าง (ควรไม่ส่ง)
### ทดสอบ 3: Todo App
- เพิ่ม todo 3 รายการ
- ทำเครื่องหมาย 2 รายการ
- ลบ 1 รายการ
- ตรวจสอบสถิติ
### ทดสอบ 4: Console
- เปิด DevTools (F12) ตรวจสอบ Console
- ไม่มี Error ให้ปรากฏ
---
## 📝 Best Practices
### State Updates
```javascript
// ถูก - รีเซ็ต state
setCount(0);
setText("");
// ถูก - คำนวณจากค่าเดิม
setCount(count + 1);
// ถูก - อัปเดต Object ด้วย spread
setUser({ ...user, name: newName });
// ❌ ผิด - อัปเดต state โดยตรง
count = count + 1;
```
### Event Handling
```javascript
// ถูก - named function
function handleClick() {
setCount(count + 1);
}