3D个人简历网站 7.联系我
3D个人简历网站 7.联系我
修改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;
