React中使用formsubmit.co按钮无响应且无跳转问题求助

问题诊断 #

• 代码存在两套独立提交逻辑：Input组件的react-hook-form表单、InputPhone组件的手动axios请求，按钮未正确关联有效提交流程，导致点击无反应
• formsubmit.co支持两种提交模式，当前代码混用模式导致流程断裂

修复方案 #

方案1：使用原生表单提交（推荐，匹配formsubmit.co原生流程） #

直接通过表单的action和method配置完成提交，无需手动axios请求：

const Input = () => {
  const { control, formState: { errors }, handleSubmit } = useForm();
  const onSubmit = (data) => {
    // 提交前的自定义验证/数据处理
    console.log("表单数据:", data);
  };

  return (
    <div>
      <form 
        onSubmit={handleSubmit(onSubmit)} 
        className={cl.form} 
        method='POST'
        action='https://formsubmit.co/el/cimewa'
      >
        {/* 绑定react-hook-form的输入组件 */}
        <InputPhone control={control} />
        
        {/* 按钮放在表单内，用type="submit"触发提交 */}
        <button type="submit" className="btn">Order</button>
      </form>
    </div>
  );
};

// 修改InputPhone组件，用react-hook-form统一管理字段
const InputPhone = ({ control }) => {
  return (
    <Controller
      name="phone"
      control={control}
      rules={{ required: true }}
      render={({ field }) => (
        <input 
          type="tel" 
          {...field} 
          placeholder="输入手机号"
        />
      )}
    />
  );
};

说明：

• 表单直接配置action为formsubmit.co的端点，method="POST"
• 按钮使用type="submit"并置于表单内部，点击自动触发提交，完成后会跳转到formsubmit.co的成功页面
• 用react-hook-form的Controller绑定输入字段，无需手动维护state，保证数据与表单同步

方案2：保留手动axios请求（适合自定义无跳转逻辑） #

如果需要提交后不跳转页面，需修正请求参数格式与配置：

const InputPhone = () => {
  const [telValue, setTelValue] = useState('');

  const handleSubmit = async () => {
    // formsubmit.co的API参数规范：attachment用于文件上传，文本内容用message/subject
    const emailData = {
      subject: 'Order received',
      message: telValue
    };

    try {
      const response = await axios.post('https://formsubmit.co/el/cimewa', emailData, {
        headers: {
          'Content-Type': 'application/json',
        }
      });
      console.log('提交成功:', response.data);
      alert('订单已提交');
    } catch (error) {
      console.error('提交失败:', error.response?.data || error.message);
      alert('提交失败，请稍后重试');
    }
  };

  return (
    <div>
      <input 
        type="tel" 
        value={telValue} 
        onChange={(e) => setTelValue(e.target.value)}
        placeholder="输入手机号"
      />
      <Btn click={handleSubmit}>Order</Btn>
    </div>
  );
};

说明：

• 修正参数：将attachment替换为subject（邮件主题）和message（邮件内容），符合formsubmit.co的API规范
• 添加Content-Type: application/json请求头，确保数据格式正确
• 完善错误捕获逻辑，便于排查问题

关键检查项 #

• 确认formsubmit.co的端点el/cimewa已正确配置接收邮箱，未被平台屏蔽
• 查看浏览器控制台的Network和Console标签，检查请求是否发送、是否存在跨域/参数错误
• 使用react-hook-form时，尽量统一表单逻辑，避免混用手动state与表单控制器

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