3D个人简历网站 7.联系我

// 从 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 引用，绑定提交事件处理函数 */}
        <form
          ref={formRef}
          onSubmit={handleSubmit}
          className='w-full flex flex-col gap-7 mt-14'
        >
          {/* 姓名输入框标签 */}
          <label className='text-black-500 font-semibold'>
            姓名
            {/* 姓名输入框，设置类型、名称、样式、占位符等属性，绑定值和输入变化事件 */}
            <input
              type='text'
              name='name'
              className='input'
              placeholder='张三'
              required
              value={form.name}
              onChange={handleChange}
            />
          </label>
          {/* 邮箱输入框标签 */}
          <label className='text-black-500 font-semibold'>
            邮箱
            {/* 邮箱输入框，设置类型、名称、样式、占位符等属性，绑定值和输入变化事件 */}
            <input
              type='email'
              name='email'
              className='input'
              placeholder='zhangsan@example.com'
              required
              value={form.email}
              onChange={handleChange}
            />
          </label>
          {/* 消息输入框标签 */}
          <label className='text-black-500 font-semibold'>
            您的留言
            {/* 消息输入框，设置名称、行数、样式、占位符等属性，绑定值和输入变化事件 */}
            <textarea
              name='message'
              rows='4'
              className='textarea'
              placeholder='请在此写下您的想法...'
              value={form.message}
              onChange={handleChange}
            />
          </label>

          {/* 提交按钮，根据加载状态禁用按钮并显示不同文本 */}
          <button
            type='submit'
            disabled={loading}
            className='btn'
          >
            {loading ? "发送中..." : "提交"}
          </button>
        </form>
      </div>
    </section>
  );
};

// 导出 Contact 组件，供其他文件使用
export default Contact;