如何结合Formspree使用preventDefault()，实现React表单提交后重置且不刷新页面？

要实现提交成功后不刷新页面且重置表单，你需要在Formspree返回提交成功状态时，调用Ant Design Form的重置方法，并同步处理验证码的状态。以下是具体修改方案：

关键改动点 #

• 使用useEffect监听Formspree的state.succeeded状态，确保仅在提交成功时执行一次重置逻辑（避免组件重复渲染时多次触发提示）
• 调用Ant Design Form实例的resetFields()方法清空输入框
• 重置HCaptcha的token和组件状态

修改后的完整代码 #

import { useEffect, useRef, useState } from 'react';
import { Form } from 'antd';
import { useForm as useFormspree } from '@formspree/react'; // 重命名避免与Ant Design的useForm冲突

const YourComponent = () => {
  const [token, setToken] = useState<string>('');
  const formRef = useRef<FormInstance>(null); // 声明Form实例的ref
  const captchaRef = useRef<any>(null); // HCaptcha的ref
  const [state, handleSubmit] = useFormspree('xxxxxxxx');

  // 监听提交成功状态，执行重置逻辑
  useEffect(() => {
    if (state.succeeded && formRef.current) {
      // 重置Ant Design表单字段
      formRef.current.resetFields();
      // 重置HCaptcha token
      setToken('');
      // 重置HCaptcha组件（若组件支持reset方法）
      captchaRef.current?.reset();
      // 显示成功提示
      formRef.current.message.success('Message sent');
    }
  }, [state.succeeded]);

  return (
    <Wrapper>
      <MessageForm
        ref={formRef}
        name='nest-messages'
        onFinish={handleSubmit}
        validateMessages={validateMessages}
      >
        {FormItems.map((item) => (
          <Form.Item
            key={item.name}
            name={['user', item.name]}
          >
            {item.inputType}
          </Form.Item>
        ))}

        <Form.Item>
          <HCaptcha
            sitekey='xxxxxxxxxx-xxxx-xxxx-xxxxxxxxx'
            onVerify={setToken}
            ref={captchaRef}
          />
          <SendButton type='primary' htmlType='submit' disabled={!token}>
            Wyślij wiadomość
          </SendButton>
        </Form.Item>
      </MessageForm>
    </Wrapper>
  );
};

export default YourComponent;

注意事项 #

• 确保formRef通过useRef<FormInstance>(null)正确声明，才能获取Ant Design Form的实例方法
• 若HCaptcha组件无reset方法，请查阅其文档找到对应重置方式
• 重命名Formspree的useForm为useFormspree，避免与Ant Design自身钩子冲突

内容的提问来源于stack exchange，提问作者Mikołaj Wittbrodt