Next.js项目：表单提交后隐藏表单并展示消息的优解咨询

核心思路：用React状态驱动条件渲染 #

不用display: none隐藏表单，而是通过组件状态控制渲染逻辑——用useState维护提交状态，根据状态决定渲染表单、成功提示还是错误提示。这种方式更符合React组件化思想，语义更清晰，还能避免隐藏DOM占用资源。

代码示例（Next.js 13+ App Router兼容） #

'use client';
import { useState } from 'react';

export default function ContactSection() {
  // 维护提交状态、错误信息和加载状态
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitError(null);
    setIsLoading(true);

    try {
      // 替换为实际的表单提交API请求
      const formData = new FormData(e.target);
      const res = await fetch('/api/contact', {
        method: 'POST',
        body: formData,
      });

      if (!res.ok) throw new Error('服务器响应异常');
      setIsSubmitted(true);
    } catch (err) {
      setSubmitError(err.message || '提交失败，请稍后重试');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', padding: '2rem' }}>
      {/* 左侧内容区 */}
      <div>
        <h2>欢迎联系我们</h2>
        <p>填写右侧表单，我们会在24小时内回复你的咨询</p>
      </div>

      {/* 右侧表单/提示区 */}
      <div>
        {isSubmitted ? (
          <div className="success-card">
            <h3>✅ 提交成功！</h3>
            <p>我们已收到你的信息，感谢你的留言</p>
          </div>
        ) : submitError ? (
          <div className="error-card">
            <h3>❌ 提交失败</h3>
            <p>{submitError}</p>
            <button onClick={() => setSubmitError(null)} className="retry-btn">重新提交</button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="contact-form">
            <div className="form-group">
              <label htmlFor="name">姓名</label>
              <input type="text" id="name" name="name" required />
            </div>
            <div className="form-group">
              <label htmlFor="email">邮箱</label>
              <input type="email" id="email" name="email" required />
            </div>
            <div className="form-group">
              <label htmlFor="message">留言内容</label>
              <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit" disabled={isLoading}>
              {isLoading ? '提交中...' : '提交表单'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

为什么这比display: none更好？ #

• 语义清晰：条件渲染会根据状态挂载/卸载组件，DOM中不会存在隐藏的表单元素，符合HTML语义规范。
• 性能更优：隐藏的表单DOM仍会占用内存、保留事件监听，条件渲染直接移除这些元素，减少不必要的资源消耗。
• 易维护扩展：状态驱动的逻辑更直观，后续添加重新提交、多状态提示等功能时，只需修改状态判断即可。

额外优化点 #

• 加入加载状态：防止用户重复提交表单，提升交互体验。
• 样式区分：给成功/错误提示添加独立类名，方便用CSS设置差异化样式（比如绿色边框、红色文字）。
• 表单重置：如果允许用户重新提交，可在点击重试按钮时调用表单的reset()方法清空内容。

内容的提问来源于stack exchange，提问作者DiegoM