修改Contact.jsx

// 從 react 庫導入 useRef 和 useState hooks
import { useRef, useState } from "react";/*** Contact 組件，用于展示聯系表單，處理用戶表單輸入和提交。* @returns {JSX.Element} 包含聯系表單的 JSX 元素*/
const Contact = () => {// 創建一個 ref 對象，用于引用表單元素，方便后續操作const formRef = useRef();// 使用 useState hook 管理表單數據，初始值為包含姓名、郵箱和消息的空對象const [form, setForm] = useState({ name: "", email: "", message: "" });// 使用 useState hook 管理表單提交時的加載狀態，初始值為未加載const [loading, setLoading] = useState(false);/*** 處理表單輸入框內容變化的函數，更新表單數據。* @param {Object} e - 事件對象* @param {Object} e.target - 觸發事件的目標輸入框元素* @param {string} e.target.name - 輸入框的名稱* @param {string} e.target.value - 輸入框的當前值*/const handleChange = ({ target: { name, value } }) => {// 擴展原有表單數據，更新當前輸入框對應的字段值setForm({ ...form, [name]: value });};/*** 處理表單提交的函數，模擬提交操作。* @param {Object} e - 事件對象*/const handleSubmit = (e) => {// 阻止表單默認提交行為，避免頁面刷新e.preventDefault();// 設置加載狀態為 true，顯示加載提示setLoading(true);// 模擬提交操作，這里可以添加實際的提交邏輯setTimeout(() => {// 打印表單數據到控制臺console.log("表單已提交:", form);// 設置加載狀態為 false，隱藏加載提示setLoading(false);// 重置表單數據setForm({ name: "", email: "", message: "" });}, 1000);};return (// 外層容器，使用相對定位，根據屏幕尺寸調整布局<section className='relative flex flex-col max-container'>{/* 表單容器，使用彈性布局 */}<div className='flex flex-col'>{/* 頁面標題 */}<h1 className='head-text'>聯系我</h1>{/* 表單元素，使用 ref 引用，綁定提交事件處理函數 */}<formref={formRef}onSubmit={handleSubmit}className='w-full flex flex-col gap-7 mt-14'>{/* 姓名輸入框標簽 */}<label className='text-black-500 font-semibold'>姓名{/* 姓名輸入框，設置類型、名稱、樣式、占位符等屬性，綁定值和輸入變化事件 */}<inputtype='text'name='name'className='input'placeholder='張三'requiredvalue={form.name}onChange={handleChange}/></label>{/* 郵箱輸入框標簽 */}<label className='text-black-500 font-semibold'>郵箱{/* 郵箱輸入框，設置類型、名稱、樣式、占位符等屬性，綁定值和輸入變化事件 */}<inputtype='email'name='email'className='input'placeholder='zhangsan@example.com'requiredvalue={form.email}onChange={handleChange}/></label>{/* 消息輸入框標簽 */}<label className='text-black-500 font-semibold'>您的留言{/* 消息輸入框，設置名稱、行數、樣式、占位符等屬性，綁定值和輸入變化事件 */}<textareaname='message'rows='4'className='textarea'placeholder='請在此寫下您的想法...'value={form.message}onChange={handleChange}/></label>{/* 提交按鈕，根據加載狀態禁用按鈕并顯示不同文本 */}<buttontype='submit'disabled={loading}className='btn'>{loading ? "發送中..." : "提交"}</button></form></div></section>);
};// 導出 Contact 組件，供其他文件使用
export default Contact;