当前位置： 首页 > news >正文

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

news 来源：原创 2025/7/23 22:09:45

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

在现代网页中，一个精致的 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

我们将在下一节中：

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

相关文章：

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

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦&#xff01;&#xff01;谢谢大家&#xff01;&#xff01;&#xff01; 在现代网页中&#xff0c;一个精致的 Contact 区域不仅仅是表单的堆砌&#xff0c;更是用户与我们建立联系的第一印象。 在本节课中&#xff0c;我…...

编程日记 2025/7/23 22:09:45

Python-MCPAgent开发-DeepSeek版本

Python-MCPAgent开发-DeepSeek版本 尝试Windows使用Python完成【McpServer】【McpAgent】开发&#xff0c;当前使用OpenAI-Agents框架进行开发 1-核心知识点 先完成【LLM】配置再完成【McpServer】开发再完成【Agent】开发完成【LLM】【McpServer】【Agent】请求互通 2-思路整…...

编程日记 2025/7/18 20:33:27

Linux:43线程封装与互斥lesson31

mmap文件映射视屏&#xff1a;待看... 目录 线程栈 代码证明&#xff1a;一个线程的数据&#xff0c;其他线程也可以访问 线程封装 简单封装,2.thread Thread.hpp Main.cc Makefile 结果&#xff1a; ​编辑 问题1&#xff1a; 问题2&#xff1a; lamba表达式 模版封…...

编程日记 2025/7/23 22:07:55

stm32测频率占空比最好的方案

频率检测, 方案方法很多种, 其中最快最节省资源的方法. 分享给大家. 其它的方案都试过, 问题多多. 适合单片机在工业应用中, 1MHZ以下的频率检测. 1MHZ估计也行. 但是偏差估计是变大了. 我试过很多种方案, 可以看我前面的文章. 最后发现目前这种方案最为优秀. 主要特点为不占用…...

编程日记 2025/7/23 22:00:24

Redis--常见数据类型List列表

目录 一、概念 二、命令 2.1 LPUSH 2.2 LPUSHX 2.3 RPUSH 2.4 RPUSHX 2.5 LRANGE 2.6 LPOP 2.7 RPOP 2.8 LINDEX 2.9 LINSERT 2.10 LLEN 2.11 阻塞版本命令 三、内部编码 一、概念 列表类型是用来存储多个有序的字符串&#xff0c;列表中的每个字符串称为元素&…...

编程日记 2025/7/23 21:57:07

Linux ： 多线程【线程概念】

Linux &#xff1a; 多线程【线程概念】 &#xff08;一&#xff09;线程概念线程是什么用户层的线程linux中PID与LWP的关系 (二) 进程地址空间页表(三) 线程总结线程的优点线程的缺点线程异常线程用途 &#xff08;一&#xff09;线程概念 线程是什么 在一个程序里的一个执行…...

编程日记 2025/7/23 22:01:10

React+Springboot项目部署ESC服务器

记录一下我个人部署Linux服务器的心得 环境介绍 ESC服务器创建时默认安装LNMP&#xff0c;即Linux&#xff0c;Nginx&#xff0c;Mysql&#xff0c;Php 所以这里不讲怎么安装Nignx和Mysql 笔者使用的Linux版本为22.0.4LTS版 前端打包 运行React打包命令进行前端项目的打包…...

编程日记 2025/7/23 21:50:55

python-Pandas库详细教程

python-Pandas库详细教程1 定义使用方法&#xff1a; 一、导入Pandas库代码 二、DataFrame用法Pandas索引 groupby()数值计算 定义 python中特定用于数据分析、处理的模板库。 优点&#xff1a; 处理数据便捷、简单。 使用方法&#xff1a; 处理“.csv”数据&#xff1a;rea…...

编程日记 2025/7/19 6:47:14

力扣刷题Day 46：搜索二维矩阵 II（240）

1.题目描述 2.思路 方法1&#xff1a;分别找到搜索矩阵的右、下边界&#xff0c;然后从[0][0]位置开始遍历这部分矩阵搜索目标值。 方法2&#xff1a;学习Krahets佬的思路&#xff0c;从搜索矩阵的左下角开始遍历&#xff0c;matrix[i][j] > target时消去第i行&#xff0c…...

编程日记 2025/7/18 20:11:55

C++：类和对象4

一&#xff0c;日期类实现 学习建议&#xff1a; 对于计算机学习来说&#xff0c;调试十分重要&#xff0c;所以在日常学习中一定要加大代码练习&#xff0c;刷代码题和课后自己敲出课上代码例题&#xff0c;注意不要去对比正确代码或者网上找正确代码直接使用&#xff0c;一…...

编程日记 2025/7/19 16:25:08

【软件工程】基于机器学习的多缺陷定位

基于机器学习的多缺陷定位&#xff08;Multi-Dault Localization, MDL&#xff09;是软件工程和自动化测试领域的重要研究方向&#xff0c;旨在通过机器学习技术高效识别代码中多个潜在缺陷的位置。以下从方法、挑战、应用场景及未来方向展开分析&#xff1a; 一、核心方法 监督…...

编程日记 2025/7/15 3:57:05

互联网大厂Java求职面试实战：Spring Boot到微服务的技术问答解析

&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 &#x1f601; 2. 毕业设计专栏&#xff0c;毕业季咱们不慌忙&#xff0c;几百款毕业设计等你选。 ❤️ 3. Python爬虫专栏…...

编程日记 2025/7/22 15:55:39

LLMs之MCP：2025年5月2日，Anthropic 宣布 Claude 重大更新：集成功能上线，研究能力大幅提升

LLMs之MCP&#xff1a;2025年5月2日&#xff0c;Anthropic 宣布 Claude 重大更新&#xff1a;集成功能上线&#xff0c;研究能力大幅提升 导读&#xff1a;2025年5月2日&#xff0c;Anthropic 宣布 Claude 推出 Integrations 集成功能和增强型高级研究功能。Integrations 基于 …...

编程日记 2025/7/11 8:12:21

飞蛾扑火算法matlab实现

注意&#xff1a;此代码实现的是求目标函数最大值&#xff0c;求最小值可将适应度函数乘以-1&#xff08;框架代码已实现&#xff09;。 注意&#xff1a;此代码实现的是求目标函数最大值&#xff0c;求最小值可将适应度函数乘以-1&#xff08;框架代码已实现&#xff09;。 注…...

编程日记 2025/7/23 15:59:50

vector--OJ1

链接: link class Solution { public:int singleNumber(vector<int>& nums) {int ret0;for(auto a : nums){ret^a;}return ret;} };链接: link class Solution { public:vector<vector<int>> generate(int numRows) {vector<vector<int>>…...

编程日记 2025/7/22 2:11:55

多模态大语言模型arxiv论文略读（六十八）

Image-of-Thought Prompting for Visual Reasoning Refinement in Multimodal Large Language Models ➡️ 论文标题&#xff1a;Image-of-Thought Prompting for Visual Reasoning Refinement in Multimodal Large Language Models ➡️ 论文作者&#xff1a;Qiji Zhou, Ruoc…...

编程日记 2025/7/19 18:37:16

【数据库知识】Mysql进阶-高可用MHA（Master High Availability）方案

mysql高可用MHA&#xff08;Master High Availability&#xff09;方案 集群部署模式下的高可用方案一、高可用架构原理1. 核心组件2. 故障切换流程 二、详细部署步骤 (3节点集群)1. 环境准备2. 节点配置&#xff08;以 node1 为例&#xff09;3. 初始化集群4. 部署MySQL Route…...

编程日记 2025/7/21 14:06:42

类型别名与接口的对比与选择

在 TypeScript 中&#xff0c;类型系统是非常强大且灵活的。两种最常用的类型定义方式就是 类型别名&#xff08;type&#xff09; 和 接口&#xff08;interface&#xff09;。它们看似相似&#xff0c;实际上在用法和功能上有所不同。在本文中&#xff0c;我们将深入探讨类型…...

编程日记 2025/7/23 1:41:31

《Effective Python》第1章 Pythonic 思维详解——始终用括号包裹单元素元组

《Effective Python》第1章 Pythonic 思维详解——始终用括号包裹单元素元组 在 Python 编程语言中&#xff0c;元组&#xff08;tuple&#xff09;是一种不可变的数据结构&#xff0c;常用于表示一组固定的值。尽管元组的语法看似简单&#xff0c;但其中却隐藏着一些微妙的陷…...

编程日记 2025/7/20 22:54:10

【计算机视觉】OpenCV实战项目：ETcTI_smart_parking智能停车系统深度解析

ETcTI_smart_parking智能停车系统深度解析 1. 项目概述2. 技术原理与系统架构2.1 核心算法1) 车牌识别算法2) ETC交易验证 2.2 系统架构 3. 实战部署指南3.1 环境配置3.2 硬件部署规范3.3 系统初始化 4. 常见问题与解决方案4.1 ETC交易失败4.2 车牌识别异常4.3 系统性能瓶颈 5.…...

编程日记 2025/7/16 16:34:07

LintCode第807题-回文数II

描述 判断一个非负整数 n 的二进制表示是否为回文数 我们保证 0 < n < 2^32 - 1 样例1 输入: n 0 输出: True 解释: 0 的二进制表示为&#xff1a;0。 样例2 输入: n 3 输出: True 解释: 3 的二进制表示为&#xff1a;11。 样例3 输入: n 4 输出: False 解释:…...

编程日记 2025/7/20 15:20:37

快速傅里叶变换暴力涨点！基于时频特征融合的高创新时间序列分类模型

往期精彩内容&#xff1a; 单步预测-风速预测模型代码全家桶-CSDN博客 半天入门&#xff01;锂电池剩余寿命预测&#xff08;Python&#xff09;-CSDN博客 超强预测模型&#xff1a;二次分解-组合预测-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;BiLSTM-Attention预测模型…...

编程日记 2025/7/21 12:28:30

股指期货的保证金交易和资金门槛是多少？

股指期货和股票交易最大的区别&#xff0c;就是它不用“全款买房”&#xff0c;而是“首付买房”——只需交一笔保证金就能撬动大额资金&#xff0c;但这也说明了门槛高、风险大。下面就来拆解&#xff0c;到底要准备多少钱才能“上车”。 一、保证金交易&#xff1a;用12万撬…...

编程日记 2025/7/22 22:58:41

spark：map 和 flatMap 的区别(Scala)

场景设定 假设有一个包含句子的 RDD&#xff1a; scala val rdd sc.parallelize(List("Hello World", "Hi Spark")) 目标是&#xff1a;将每个句子拆分成单词。 1. 用 map 的效果 代码示例 scala val resultMap rdd.map(sentence > sentence…...

编程日记 2025/7/23 17:47:49

判断两台设备是否在同一局域网内的具体方法

以下是判断两台设备是否在同一局域网内的具体方法&#xff1a; 1. 检查IP地址和子网掩码 操作步骤&#xff1a; Windows系统&#xff1a; 按 Win R 键&#xff0c;输入 cmd 并回车。输入 ipconfig&#xff0c;查看 IPv4 地址 和 子网掩码&#xff08;如 192.168.1.5/255.255.2…...

编程日记 2025/7/23 1:40:07

cmake：test project

本文主要探讨cmake在测试和项目中的应用。 add_test add_test(NAME <name> COMMAND <command> [<arg>...] [CONFIGURATIONS <config>...] [WORKING_DIRECTORY <dir>] [COMMAND_EXPAND_LISTS])  add_test(NAME test_uni COMMAND $<TARGET_F…...

编程日记 2025/7/16 4:36:16

Qwen-2.5 omni

问题1 Qwen2.5-Omni的主要功能是什么&#xff1f; Qwen2.5-Omni的主要功能是处理和生成多种模态的数据&#xff0c;包括文本、图像、音频和视频。它能够同时理解和生成这些模态的信息&#xff0c;支持复杂的多模态任务&#xff0c;例如语音对话、视频理解、图像描述生成等。 …...

编程日记 2025/7/22 11:10:45

Problem D: 异常2

1.题目描述 检查危险品程序&#xff1a;生成货物类、机器类&#xff0c;货物类有属性name&#xff0c;机器类有检测的check方法&#xff0c;若货物名称是炸弹、毒药、刀具&#xff0c;则抛出异常提示。 代码如下&#xff1a; import java.util.Scanner; class goods{ Stri…...

编程日记 2025/7/20 1:35:22

AI智慧公园管理方案：用科技重塑市民的“夜游体验”

AI智慧公园管理方案&#xff1a;多场景智能巡检与安全防控 一、背景与痛点分析 夏季夜间&#xff0c;公园成为市民休闲娱乐的核心场所&#xff0c;但管理难度随之激增&#xff1a; 宠物管理失控&#xff1a;未牵绳宠物进入园区&#xff0c;随地排泄、惊扰游客&#xff0c;甚…...

编程日记 2025/7/22 22:38:24

AJAX原理

AJAX使用XHR 对象和服务器进行数据交互 XHR <p class"my-p"></p><script>const xhr new XMLHttpRequest()xhr.open(GET,http://hmajax.itheima.net/api/province)xhr.addEventListener(loadend,()>{// console.log(xhr.response)const data …...

编程日记 2025/7/19 4:31:18

内存泄露，如何判断是资源泄露还是堆栈泄露？

作为软件测试工程师，判断内存泄露类型对于定位和解决问题至关重要。以下是区分资源泄露和堆栈泄露的方法： 1. 基本概念区分 资源泄露(Resource Leak)： 指非内存资源未正确释放，如文件句柄、数据库连接、网络套接字等 虽然不直接表现为Java堆内存增长，但会导致系统资源耗…...

编程日记 2025/7/18 21:34:13

无人甘蔗小车履带式底盘行走系统的研究

1.1 研究背景与意义 1.1.1 研究背景 甘蔗作为全球最重要的糖料作物之一&#xff0c;在农业经济领域占据着举足轻重的地位。我国是甘蔗的主要种植国家&#xff0c;尤其是广西、广东、云南等地&#xff0c;甘蔗种植面积广泛&#xff0c;是当地农业经济的重要支柱产业。甘蔗不仅…...

编程日记 2025/7/22 20:20:48

Redis设计与实现——单机Redis实现

RedisDB RedisDB的核心结构 键空间&#xff08;dict*dict&#xff09; 结构&#xff1a;哈希表&#xff08;字典&#xff09;&#xff0c;键为字符串对象&#xff08;SDS&#xff09;&#xff0c;值为 Redis 对象&#xff08;字符串、列表、哈希等&#xff09;。 功能&#x…...

编程日记 2025/7/20 1:35:20

ES C++客户端安装及使用

介绍 Elasticsearch &#xff0c; 简称 ES &#xff0c;它是个开源分布式搜索引擎&#xff0c;它的特点有&#xff1a;分布式&#xff0c;零配置&#xff0c;自动发现&#xff0c;索引自动分片&#xff0c;索引副本机制&#xff0c;restful 风格接口&#xff0c;多数据源&…...

编程日记 2025/7/22 0:34:37

C++学习之STL学习

在经过前面的简单的C入门语法的学习后&#xff0c;我们开始接触C最重要的组成部分之一&#xff1a;STL 目录 STL的介绍 什么是STL STL的历史 UTF-8编码原理&#xff08;了解&#xff09; UTF-8编码原理 核心编码规则 规则解析 编码步骤示例 1. 确定码点范围 2. 转换为…...

编程日记 2025/7/20 1:29:35

【东枫科技】使用LabVIEW进行NVIDIA CUDA GPU 开发

文章目录 工具包 CuLab - LabVIEW 的 GPU 工具包特性和功能功能亮点类似 LabVIEW 的 GPU 代码开发支持的功能数值类型和维数开发系统要求授权售价 工具包 CuLab - LabVIEW 的 GPU 工具包 CuLab 是一款非常直观易用的 LabVIEW 工具包&#xff0c;旨在加速 Nvidia GPU 上的计算密…...

编程日记 2025/7/19 21:05:17

LangChain对话链：打造智能多轮对话机器人

LangChain对话链：打造智能多轮对话机器人 目录 LangChain对话链：打造智能多轮对话机器人ConversationChain 是什么核心功能与特点基本用法示例内存机制自定义提示词应用场景与其他链的结合`SequentialChain` 是什么![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0…...

编程日记 2025/7/14 0:05:33

MIT 6.S081 2020 Lab3 page tables 个人全流程

文章目录 零、写在前面1、关于页表2、RISC-V Rv39页表机制3、虚拟地址设计4、页表项设计5、访存流程6、xv6 的页表切换7、页表遍历 一、Print a page table1.1 说明1.2 实现 二、A kernel page table per process2.1 说明2.2 初始化 / 映射相关2.3 用户内核页表的创建和回收2.4…...

编程日记 2025/7/19 7:57:51

spring cloud loadbalancer实现机房感知的负载均衡

1 概述 在同城多机房情景下&#xff0c;各个机房各自部署一套微服务集群&#xff0c;正常情况下微服务调用在本机房闭环。在如下某些灾难情景&#xff0c;可以尝试拉远调用以最大程度维持业务连续性&#xff0c;这些情景例如&#xff1a; A机房多个服务器宕机。应用由于BUG发…...

编程日记 2025/7/20 7:52:29

vs2022配置opencv

一、下载opencv 1、进入https://opencv.org/官网下载 2、打开下载的exe开始安装&#xff0c;自己新建一个文件夹opencv作为安装路径 3、安装完成得到opencv文件内容 4、开始配置环境变量 4.1、复制下图的路径 4.2、添加到系统环境变量 5、配置VS项目环境 5.1、添加包含目录 …...

编程日记 2025/7/21 14:02:22

Appium-OppoA92S-真机记坑

问题现象 使用Appium操作真机时候&#xff0c;需要安装AppiumSettings软件&#xff0c;但是实际操作&#xff0c;一直提示安装失败&#xff0c;安装包异常 问题分析 [待定] 网上找到方式&#xff0c;都尝试过&#xff0c;无效 问题解决 取消开发者模式&#xff0c;USB连接手…...

编程日记 2025/7/23 1:15:41

ENSP-OSPF综合实验

AR4中通过ospf获取的其他区域路由信息&#xff0c;并且通过路由汇总后简化路由信息 实现全网通&#xff0c;以及单向重发布&#xff0c;以及通过缺省双向访问&#xff0c; 通过stub简化过滤四类五类lsa&#xff0c;简化ospf路由信息 通过nssa简化ospf信息 区域汇总简化R4路由信…...

编程日记 2025/7/23 1:22:56

基于VSCode+PlatformIO环境的ESP8266的HX1838红外模块

以下是针对ESP8266开发板的红外遥控解码系统开发教程&#xff0c;基于VSCodePlatformIO环境编写 一、概述 本实验通过ESP8266开发板实现&#xff1a; 红外遥控信号解码自定义按键功能映射串口监控输出基础设备控制&#xff08;LED&#xff09; 硬件组成&#xff1a; NodeMC…...

编程日记 2025/7/21 12:48:28

HTML12：文本框和单选框

表单元素格式 属性说明type指定元素的类型。text、password、 checkbox、 radio、submit、reset、file、hidden、image 和button&#xff0c;默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初始宽度。当type为text 或pas…...

编程日记 2025/7/21 19:36:43

JVM规范之运行时数据区域

JVM运行时数据区 前言为什么要阅读jvm规范&#xff1f;阅读本篇文章可以学习到啥&#xff1f; 正文概述JVM线程私有的运行时数据区pc(program counter) RegisterJVM StackNative Method Stack JVM线程共享的运行时数据区HeapMethod AreaRun-time constant pool 总结参考链接 前…...

编程日记 2025/7/17 4:31:15

LVGL（lv_btnmatrix矩阵按钮）

文章目录 &#x1f527; 1. 基本概念&#x1f4cc; lv\_btnmatrix 是什么&#xff1f; &#x1f9f1; 2. 基本结构和用法✅ 创建按钮矩阵✅ 设置按钮文字 &#x1f9f0; 3. 设置按钮行为&#x1f504; 4. 响应按钮点击&#x1f3a8; 5. 自定义样式&#x1f4cc; 6. 使用技巧&am…...

编程日记 2025/7/22 23:08:49

AUTOSAR图解==＞AUTOSAR_TR_AIDesignPatternsCatalogue

AUTOSAR 人工智能设计模式目录 AUTOSAR传感器执行器与仲裁设计模式的深入解析与图解 目录 简介传感器和执行器模式 架构概述组件结构交互流程应用场景 多请求者或提供者之间的仲裁模式 架构概述组件结构仲裁流程应用场景 总结 1. 简介 AUTOSAR&#xff08;AUTomotive Open Sy…...

编程日记 2025/7/18 18:12:58

英语时态--中英文对“时间”的不同理解

文章目录 中英文时间上的差异我现在正在休息一般现在时1. 经常发生的动作2. 表客观事实3. 表示现在的状态一般将来时1. will2. be going to含义1：打算在将来某时做某事含义2：某事预计要发生而且不可避免中英文时间上的差异 我现在正在休息 “我现在正在休息。”用英文怎么说…...

编程日记 2025/7/21 14:01:30

Linux基础开发工具一（yum/apt ，vim）

前言 Linux下&#xff0c;如何进行软件安装&#xff0c;查找&#xff0c;卸载 1.源代码安装 2. rpm安装方式&#xff0c;安装包的本质&#xff0c;就是把源代码在Linux下编译好&#xff0c;然后打包&#xff08;别人把自己编译好的软件打包给你让你去安装&#xff09; 上面…...

编程日记 2025/7/15 8:18:28

Java 线程池原理

Java 线程池是一种管理和复用线程的机制&#xff0c;其原理如下&#xff1a; 核心概念 线程池的初始化 &#xff1a;在创建线程池时&#xff0c;需要设置一些关键参数&#xff0c;如核心线程数&#xff08;corePoolSize&#xff09;、最大线程数&#xff08;maximumPoolSize&am…...

编程日记 2025/7/15 14:08:16