React 表單元件開發
在 React 中管理表單元件，常見方式是使用 **受控元件（Controlled Components）**：由 React 的 state 保存表單值，並透過 `value` 或 `checked` 與輸入事件同步更新。
## 常見表單元件管理方式
### 1. 單行輸入框 `<input type="text">`
使用 `value` 綁定 state，並在 `onChange` 中更新：
```jsx
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
/>
```
- `event.target.value`：取得文字輸入內容
- `value`：目前由 React 控制的值
---
### 2. 下拉式選單 `<select>`
同樣使用 `value` 和 `onChange`：
```jsx
<select
value={role}
onChange={(event) => setRole(event.target.value)}
>
<option value="">請選擇角色</option>
<option value="student">學生</option>
<option value="teacher">老師</option>
</select>
```
---
### 3. 勾選框 `<input type="checkbox">`
勾選框應使用 `checked`，而不是 `value`：
```jsx
<input
type="checkbox"
checked={subscribed}
onChange={(event) => setSubscribed(event.target.checked)}
/>
```
- `event.target.checked` 會回傳 `true` 或 `false`
- `checked` 表示目前是否勾選
---
## 完整整合範例
```jsx
import { useState } from "react";
function UserForm() {
const [formData, setFormData] = useState({
name: "",
role: "",
subscribed: false,
});
function handleChange(event) {
const { name, value, type, checked } = event.target;
setFormData((previousData) => ({
...previousData,
[name]: type === "checkbox" ? checked : value,
}));
}
function handleSubmit(event) {
event.preventDefault();
console.log("表單資料：", formData);
alert(`你好，${formData.name}`);
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">姓名：</label>
<input
id="name"
name="name"
type="text"
value={formData.name}
onChange={handleChange}
placeholder="請輸入姓名"
/>
</div>
<div>
<label htmlFor="role">身分：</label>
<select
id="role"
name="role"
value={formData.role}
onChange={handleChange}
>
<option value="">請選擇</option>
<option value="student">學生</option>
<option value="teacher">老師</option>
<option value="developer">開發者</option>
</select>
</div>
<div>
<label>
<input
name="subscribed"
type="checkbox"
checked={formData.subscribed}
onChange={handleChange}
/>
訂閱電子報
</label>
</div>
<button type="submit">送出</button>
</form>
);
}
export default UserForm;
```
## 重點整理
1. 文字輸入框與下拉選單使用：
```jsx
value={...}
onChange={...}
```
2. 勾選框使用：
```jsx
checked={...}
onChange={...}
```
3. 文字或選項內容從：
```jsx
event.target.value
```
4. 勾選狀態從：
```jsx
event.target.checked
```
5. `event.preventDefault()` 可以避免表單送出時重新載入頁面。
這種方式能讓 React 隨時掌握表單目前的狀態，也方便進行驗證、送出資料及重設表單。
相關學習地圖、教學課程
F2E 網站前端工程