Three.js + React 实战系列 - 联系方式提交表单区域 Contact 组件✨(表单绑定 + 表单验证)

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦!!谢谢大家!!!

在现代网页中,一个精致的 Contact 区域不仅仅是表单的堆砌,更是用户与我们建立联系的第一印象。

在本节课中,我们构建了一个响应式、高颜值的联系表单,同时融入动画加载反馈与背景图层,提升整体体验感。

✨ 实现亮点

  • 通过插入 /assets/terminal.png 作为背景图,形成了极具黑客风格的氛围
  • 使用 useState 管理 nameemailmessage 字段
  • 通过 useRef 获取 form DOM,并模拟一个加载状态
  • 实现了统一风格的输入框、按钮

📝 核心代码拆解

js 复制代码
const [form, setForm] = useState({ name: '', email: '', message: '' });

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

通过简洁的 handleChange 函数,自动绑定 input 的 name 字段和当前值,实现了通用型双向数据绑定。

html 复制代码
<form ref={formRef} onSubmit={handleSubmit}>
  {/* 表单字段 */}
  <button disabled={loading}>{loading ? 'Sending...' : 'Send Message'}</button>
</form>

表单提交后通过 setLoading(true) 控制按钮状态,并在 2 秒后恢复,同时重置表单。

js 复制代码
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

我们将在下一节中:

🌟 完成个人主页项目的最后一节,页脚部分。

相关推荐
沐知全栈开发1 小时前
Python3 集合
开发语言
Jonathan Star1 小时前
用Python轻松提取视频音频并去除静音片段
开发语言·python·音视频
程序猿阿伟2 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
Evand J2 小时前
【自适应粒子滤波MATLAB例程】Sage Husa自适应粒子滤波,用于克服初始Q和R不准确的问题,一维非线性滤波。附下载链接
开发语言·matlab·卡尔曼滤波·自适应滤波·非线性
尘觉2 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
hd51cc2 小时前
C++ 类的学习(四) 继承
开发语言·c++·学习
编码追梦人2 小时前
深耕 Rust:核心技术解析、生态实践与高性能开发指南
开发语言·后端·rust
2301_772093563 小时前
KVSTORE_Pain point_tuchuang_ROS2
java·开发语言·1024程序员节
刘火锅3 小时前
Java 17 环境下 EasyPoi 反射访问异常分析与解决方案(ExcelImportUtil.importExcelMore)
java·开发语言·python
西部风情3 小时前
聊聊连续、递增
java·开发语言