對個人主頁設計和實現感興趣的朋友可以訂閱我的專欄哦！！謝謝大家！！！

在現代網頁中，一個精致的 Contact 區域不僅僅是表單的堆砌，更是用戶與我們建立聯系的第一印象。

在本節課中，我們構建了一個響應式、高顏值的聯系表單，同時融入動畫加載反饋與背景圖層，提升整體體驗感。

? 實現亮點

• 通過插入 /assets/terminal.png 作為背景圖，形成了極具黑客風格的氛圍
• 使用 useState 管理 name、email 與 message 字段
• 通過 useRef 獲取 form DOM，并模擬一個加載狀態
• 實現了統一風格的輸入框、按鈕

📝 核心代碼拆解

const [form, setForm] = useState({ name: '', email: '', message: '' });const handleChange = ({ target: { name, value } }) => {setForm({ ...form, [name]: value });
};

通過簡潔的 handleChange 函數，自動綁定 input 的 name 字段和當前值，實現了通用型雙向數據綁定。

<form ref={formRef} onSubmit={handleSubmit}>{/* 表單字段 */}<button disabled={loading}>{loading ? 'Sending...' : 'Send Message'}</button>
</form>

表單提交后通過 setLoading(true) 控制按鈕狀態，并在 2 秒后恢復，同時重置表單。

setTimeout(() => {setLoading(false);formRef.current.reset();setForm({ name: '', email: '', message: '' });
}, 2000);

這一邏輯模擬了后端異步發送郵件后的回調處理，也為后續集成 emailJS、Node 服務端等提供了擴展空間。

🌍 響應式與動效體驗

• 🎨所有組件使用 flex, space-y-*, head-text 等樣式類確保在不同設備下展示良好。
• 📱提交按鈕搭配箭頭圖標 /assets/arrow-up.png，視覺反饋更直觀。
• 💻 表單內容 hover 與 placeholder 文案也經過優化，更貼近真實應用場景。

---

📌 總結

Contact.jsx 組件是連接我們和用戶的核心區域：

• ?熟練使用 state 管理當前展示內容
• ?深入理解表單綁定以及表單驗證
• ?模擬郵件發送功能，方便后續集成

🔠 下一篇預告：頁腳組件Footer.jsx

我們將在下一節中：

🌟 完成個人主頁項目的最后一節，頁腳部分。