ReactJS - 表單編程

Hello, 有志者們！今天，我們將要進入ReactJS表單編程的精彩世界。作為你們親切鄰居的計算機科學老師，我將引導你們一步一步地走過這個旅程。所以，來一杯咖啡（或你們最喜歡的飲料），讓我們開始吧！

ReactJS - Form Programming

ReactJS中的表單是什麼？

在我們跳進代碼之前，讓我們先了解表單是什麼，以及它們為什麼重要。表單就像是網頁應用程序中用戶輸入的守門人。它們讓用戶能夠與我們的應用程序互動，提供我們可以進行處理和使用的信息。在React中，表單有點特殊，因為它們維護自己的狀態。這意味著我們需要用不同的方式來處理它們。

表單處理的基本知識

讓我們從一個簡單的表單範例開始：

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert('已提交名字：' + name);
}

return (
<form onSubmit={handleSubmit}>
<label>
名字：
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</label>
<input type="submit" value="提交" />
</form>
);
}

讓我們分解一下：

我們從React導入useState來管理我們的表單狀態。
我們創建了一個狀態變量name和一個函數setName來更新它。
handleSubmit函數阻止了表單的默認提交，並顯示一個帶有提交名字的警告。
在表單中，我們將輸入的value設置為我們的name狀態，並使用onChange在輸入改變時更新狀態。

這就是React中表單處理的核心。我們正在用React控制表單的狀態，這就是為什麼我們稱之為"受控组件"。

處理多個輸入

現在，如果我們有多個輸入呢？我們需要為每個輸入創建一個獨立的狀態嗎？不一定！讓我們看看一個更複雜的表單：

import React, { useState } from 'react';

function MultipleInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('表單已提交：', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="名字"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="姓氏"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="電子郵件"
/>
<button type="submit">提交</button>
</form>
);
}

在這個例子中，我們使用一個單一的狀態對象來管理所有的表單字段。handleChange函數使用輸入的name屬性來更新我們狀態中的正確字段。這種方法在表單變大的時候也很容易擴展。

處理不同的輸入類型

表單不只是關於文本輸入。讓我們看看如何處理不同類型的輸入：

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('表單已提交：', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="名字"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="年齡"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">選擇性別</option>
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">其他</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
你是學生嗎？
</label>
<fieldset>
<legend>最喜歡的顏色</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
紅色
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
藍色
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
綠色
</label>
</fieldset>
<button type="submit">提交</button>
</form>
);
}

這個表單演示了如何處理各種輸入類型：文本、數字、選擇、複選框和單選按鈕。關鍵在於handleChange函數，它會檢查輸入類型並相應地更新狀態。

表單驗證

沒有驗證的表單是不完整的。讓我們給我們的表單添加一些基本的驗證：

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: ''
});

const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = '用戶名是必填的';
if (!formData.email) {
newErrors.email = '電子郵件是必填的';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = '電子郵件格式無效';
}
if (!formData.password) {
newErrors.password = '密碼是必填的';
} else if (formData.password.length < 6) {
newErrors.password = '密碼必須至少6個字符';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('表單已提交：', formData);
// 在這裡，你通常會將數據發送到服務器
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="用戶名"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="電子郵件"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="密碼"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">提交</button>
</form>
);
}

在這個例子中，我們添加了一個validateForm函數，它檢查是否有空字段，並驗證電子郵件的格式和密碼的長度。我們將任何錯誤存儲在一個獨立的狀態對象中，並在相關的輸入字段下方顯示它們。

結論

就这样！我們已經涵蓋了React中表單處理的基本知識，從簡單的文本輸入到具有各種輸入類型和驗證的更複雜表單。記住，熟練是成功之母。嘗試自己建立表單，嘗試不同的輸入類型，並不怕犯錯誤——這是我們學習的方式！

這裡是一個我們使用方法的快速參考表：

方法	目的
useState	在功能组件中創建和管理狀態
onChange	處理表單輸入的改變
onSubmit	處理表單提交
preventDefault	阻止表單的默認提交行為

快樂編程，願你的表單永遠對用戶友好且無錯誤！

Credits: Image by storyset