React/Next.js中React Bootstrap表单提交后重置不影响校验的实现方法

你遇到的校验失效问题核心是两个逻辑错误：

1. 缺少表单校验前置判断，未确认表单合法性就直接发起提交请求，且setValidated(true)的放置位置错误，导致校验状态和实际表单行为不同步
2. 状态更新存在闭包风险，thankYouMessage更新直接依赖原有状态，并发场景下可能出现状态更新不符合预期

修复步骤 #

1. 修正提交处理逻辑 #

先校验表单合法性，只有校验通过后才发起请求，调整setValidated的触发时机：

// Form validation
const [validated, setValidated] = useState(false);
// Thank you Message
const [thankYouMessage, setThankYouMessage] = useState(false);
// 加载状态，避免重复提交（优化新增）
const [loading, setLoading] = useState(false);
const formRef = useRef(null);

const handleReset = () => {
  formRef.current.reset();
  setValidated(false);
};

// Form submit handler
async function handleSubmit(e) {
  e.preventDefault();
  e.stopPropagation();
  const form = e.currentTarget;
  // 新增表单合法性判断
  if (!form.checkValidity()) {
    setValidated(true);
    return;
  }
  setValidated(true);
  setLoading(true);

  const formData = new FormData(form);
  try {
    const res = await fetch(
      "https://domain.tld/wp-json/contact-form-7/v1/contact-forms/1234/feedback",
      {
        body: formData,
        method: "POST",
      }
    );
    const response = await res.json();
    if (response.status === "mail_sent") {
      // 用函数式更新避免闭包问题
      setThankYouMessage(prev => !prev);
      handleReset();
      // 可选：3秒后自动隐藏成功提示
      setTimeout(() => setThankYouMessage(false), 3000);
    } else if (response.status === "mail_failed") {
      alert("Message failed to send.");
    }
  } catch (err) {
    // 新增网络异常捕获
    alert("网络异常，请稍后重试");
  } finally {
    setLoading(false);
  }
}

2. 调整表单结构，添加加载状态 #

<div>
  <Form
    noValidate
    validated={validated}
    onSubmit={handleSubmit}
    ref={formRef}
  >
    <Form.Group controlId="your-name" className="mb-3">
      <Form.Control
        required
        type="text"
        placeholder="Your name"
        name="your-name"
      />
      <Form.Control.Feedback type="invalid">
        Please enter your name
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group controlId="your-email" className="mb-3">
      <Form.Control
        required
        type="email"
        placeholder="Your email address"
        name="your-email"
      />
      <Form.Control.Feedback type="invalid">
        Please enter your email
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group controlId="your-message" className="mb-3">
      <Form.Control
        as="textarea"
        cols={30}
        rows={6}
        placeholder="Write your message..."
        name="your-message"
      />
    </Form.Group>
    <Button type="submit" variant="primary" size="lg" disabled={loading}>
      {loading ? "发送中..." : "Send Message"}
      <span></span>
    </Button>
  </Form>
  <Alert
    variant="success"
    className={thankYouMessage ? "d-block mt-3" : "d-none"}
  >
    Thank you for your message. It has been sent.
  </Alert>
</div>

额外优化建议 #

• 移除async/await和then的混写逻辑，统一用async/await加try/catch的结构，代码可读性更高
• 新增加载状态避免用户重复提交，提升交互体验
• 新增网络异常捕获逻辑，覆盖请求失败的边界场景
• 成功提示增加自动消失逻辑，无需用户手动操作

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