React 中使用 FormSubmit.co 实现表单提交后重定向的正确方法-js教程-PHP中文网

本文详解如何在 React（配合 react-hook-form 和 axios）中调用 FormSubmit.co API 后，手动触发页面跳转，解决默认不重定向的问题。核心在于理解 handleSubmit 的自动 preventDefault() 行为，并在成功响应后主动执行导航。

本文详解如何在 react（配合 react-hook-form 和 axios）中调用 formsubmit.co api 后，手动触发页面跳转，解决默认不重定向的问题。核心在于理解 `handlesubmit` 的自动 `preventdefault()` 行为，并在成功响应后主动执行导航。

在 React 应用中集成 formsubmit.co 时，许多开发者会遇到一个典型问题：点击提交按钮后，表单数据成功发送，但页面并未像官网测试表单那样自动跳转到指定的成功页（如 https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/thanks 或自定义 URL）。这并非 API 失效，而是由 React 的事件处理机制与 HTML 原生表单行为差异导致的。

? 根本原因：react-hook-form 的 handleSubmit 会阻止默认跳转

HTML 原生

提交时，浏览器会自动发起 POST 请求并重定向至 action 指定地址（即 formsubmit.co 的响应页）。而 react-hook-form 的 handleSubmit 是一个封装后的事件处理器，其内部始终调用 e.preventDefault() —— 这是为了防止页面刷新、支持异步校验和自定义逻辑，但也同时禁用了原生跳转行为。

你当前的代码中：

const handleSubmit = async () => { /* axios 发送数据 */ };
<btn click="{handleSubmit}">Order</btn>

完全绕过了

中使用了 react-hook-form 的 handleSubmit，它也仅负责调用你的 onSubmit 回调，不会恢复原生跳转逻辑。

✅ 正确解法：在请求成功后主动导航

FormSubmit.co 的 API（POST https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/{your-id}）本质是无状态的 Webhook 接口，它接收数据并返回 JSON 响应（如 { "message": "Message sent successfully" }），不负责控制客户端跳转。因此，跳转逻辑必须由你显式实现：

✅ 方案一：跳转到外部 URL（如 FormSubmit.co 成功页）

const handleSubmit = async () => {
  const emailData = {
    attachment: 'Order received',
    html: telValue,
    // ⚠️ 注意：formsubmit.co 要求字段名与表单 input name 一致
    // 若需保留原始表单结构，建议直接序列化整个 form data（见下方提示）
  };

  try {
    const response = await axios.post('https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/cimewa', emailData);
    console.log('Email sent:', response.data);

    // ✅ 手动跳转到 FormSubmit.co 默认感谢页（或你配置的 redirect URL）
    window.location.href = 'https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/thanks';
    // 或跳转到自定义成功页（需确保该页已配置在 formsubmit.co 后台）
    // window.location.href = 'https://yourdomain.com/thank-you';

  } catch (error) {
    console.error('Submission failed:', error.response?.data || error.message);
    // 可在此处显示错误提示（如 Toast 或表单内 error message）
  }
};

✅ 方案二：跳转到 React Router 内部路由（推荐用于 SPA）

import { useNavigate } from 'react-router-dom';

const InputPhone = (props) => {
  const navigate = useNavigate(); // ✅ 获取导航函数
  const { control } = useForm();
  const [telValue, setTelValue] = useState('');

  const handleSubmit = async () => {
    const emailData = {
      attachment: 'Order received',
      html: telValue,
    };

    try {
      await axios.post('https://www.php.cn/link/aafe7061523ba396c00a46a0f4056b31/el/cimewa', emailData);
      // ✅ 导航到内部路由（无页面刷新）
      navigate('/thank-you', { 
        state: { submitted: true } 
      });
    } catch (error) {
      console.error('Submission failed:', error);
      // 处理错误...
    }
  };

  return <btn onclick="{handleSubmit}">Order</btn>;
};

⚠️ 重要注意事项

字段命名必须匹配：formsubmit.co 严格依赖 name 属性映射字段。若你用 html: telValue 发送，邮件正文只会显示手机号；但若想让表单数据被正确解析为字段（如 phone=123），请确保 emailData 的 key 与你在 formsubmit.co 后台设置的字段名一致（例如 phone, email, message），或直接使用 FormData 对象：
```
const formData = new FormData();
formData.append('phone', telValue);
formData.append('attachment', 'Order received');
// 然后 axios.post(url, formData, { headers: {} })
```
不要混淆两种提交方式：
❌ 不要混用 react-hook-form 的
和独立的 axios 提交函数；
✅ 推荐统一使用 handleSubmit 包裹的回调，并在其中执行 axios + 导航逻辑。
错误处理不可省略：网络失败、4xx/5xx 响应、CORS 限制等都可能导致 axios.post 抛错。务必在 catch 块中提供用户友好的反馈（如 alert、Toast 或表单下方错误提示）。
CORS 安全提示：formsubmit.co 允许前端直连，但部分环境（如某些企业网络）可能拦截跨域请求。生产环境建议搭配后端代理（如 Next.js API Route）增强稳定性与安全性。

✅ 总结

场景	解决方案
需跳转到 formsubmit.co/thanks 或其他外链	使用 window.location.href = '...'
需跳转到 React Router 内部页面（如 /success）	使用 useNavigate()（v6+）或 useHistory()（v5）
需保证字段被 formsubmit.co 正确识别	严格按 name 键名构造 emailData，或改用 FormData