ReactJS - 表單組件

你好啊，有抱負的開發者們！今天，我們將要深入React表單組件的精彩世界。作為你們友善的鄰居計算機科學老師，我將指導你們一步一步地走過這個旅程。所以，拿起你們最喜歡的飲料，放鬆一下，讓我們一起踏上這次編程冒險吧！

ReactJS - Form Components

什麼是表單組件？

在我們深入React表單組件的細節之前，讓我們花一會兒時間來了解它們是什麼，以及它們為什麼這麼重要。

定義

React中的表單組件是一種專門設計用於處理用戶輸入和數據提交的特殊組件。它就像你們在醫生辦公室填寫的那些紙質表單的數字版本，但更加酷炫且交互性更强！

重點

表單組件在網頁開發中至關重要，因為它們是用戶提供信息的主要方式。無論是一個簡單的登錄表單還是一個複雜的問卷調查，表單組件使用戶能夠與你的應用程序交互，並提供有價值的數據。

使用表單組件

現在我們已經了解了表單組件是什麼，讓我們挽起袖子學習如何在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>
<button type="submit">提交</button>
</form>
);
}

讓我們分解一下：

我們從React中導入useState來管理我們表單的狀態。
我們創建一個名為SimpleForm的功能組件。
在組件內部，我們使用useState創建一個名為name的狀態變量及其設置函數setName。
我們定義一個handleSubmit函數，該函數阻止表單的默認提交行為並顯示一個帶有輸入名稱的警告框。
在返回語句中，我們渲染一個包含名稱輸入字段和提交按鈕的表單。
輸入字段的值由name狀態控制，其onChange事件在用戶輸入時更新狀態。

處理多個輸入

現在，讓我們升級一下，創建一個具有多個輸入框的表單：

import React, { useState } from 'react';

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

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

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

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

在這個示例中：

我們使用一個名為formData的單個狀態對象來存儲所有表單字段。
handleChange函數使用輸入框的name屬性來更新狀態中的正確字段。
我們使用展開運算符（...prevData）來在更新之前複製現有的狀態。

表單驗證

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

import React, { useState } from 'react';

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

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

const validate = () => {
let tempErrors = {};
if (!formData.username) tempErrors.username = "用戶名是必填的";
if (formData.password.length < 6) tempErrors.password = "密碼必須至少6個字符";
setErrors(tempErrors);
return Object.keys(tempErrors).length === 0;
};

const handleSubmit = (event) => {
event.preventDefault();
if (validate()) {
console.log('表單提交：', formData);
} else {
console.log('表單有錯誤');
}
};

return (
<form onSubmit={handleSubmit}>
<label>
用戶名：
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
{errors.username && <span style={{color: 'red'}}>{errors.username}</span>}
</label>
<label>
密碼：
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
{errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
</label>
<button type="submit">提交</button>
</form>
);
}

在這個示例中：

我們添加了一個新的狀態errors來存儲驗證錯誤。
我們創建了一個validate函數來檢查用戶名是否為空和密碼是否過短。
在handleSubmit中，我們只有當表單通過驗證時才繼續操作。
當驗證失敗時，我們在每個輸入字段下方顯示錯誤信息。

結論

好了，各位！我們已經穿越了React表單組件的土地，從簡單的輸入到多字段表單和驗證。記住，熟練是需要練習的，所以不要害怕嘗試這些概念並創建你自己的表單。

當我們結束時，這裡有一個小表格總結我們在表單組件中使用過的關鍵方法：

方法	目的
useState	管理表單狀態
onChange	處理輸入變化
onSubmit	處理表單提交
preventDefault	阻止默認表單行為

繼續編程，保持好奇心，並記住：在編程世界中，每一個錯誤都是一個學習機會。祝你在React的世界裡玩得開心！

Credits: Image by storyset

上一教程:

ReactJS - 圖標