如何防止提交表單后加載空白頁？

Question

我在提交聯系表格后重新加載空白頁面時遇到問題。 聯系表正在工作，email 正在發送給我，但之后它自己加載了一個空白頁面。

我希望它像這樣：提交表單 -> 發送消息 -> 清除值 -> 無需重新加載。

所以我知道e.preventDefault()我嘗試使用它但是為此我需要一個額外的函數來傳遞e prop。 例如：但我無法將鈎子傳遞到 function。

  const handleSubmit (e: any) => {
    const [state, handleSubmit] = useForm('xwkjewea');
    e.preventDefault()
    if (state.succeeded) {
      formRef.current.resetFields();
      formRef.current.message.success('Wiadomość została wysłana');
    }
  }

我正在使用 FormSpree 來為我的消息發送提供服務，並且為了正常工作，我需要像下面這樣進行操作：

const Contact = () => {
  const formRef = useRef<any>();
  const captchaRef = useRef<HCaptcha>(null);

  const [token, setToken] = useState<string>('');
  const [state, handleSubmit] = useForm('formSpree-id');

  if (state.succeeded) {
    formRef.current.resetFields();
    formRef.current.message.success('Sent');
  }

  const onExpire = () => {
    setToken('');
    message.warning('Expired');
  };

  const onError = (err: string) => {
    setToken('');
    message.error(`${err}`);
  };

  return (
    <Wrapper>
      <Title>Contact</Title>
      <MessageForm
        ref={formRef}
        name='nest-messages'
        onFinish={handleSubmit}
        validateMessages={validateMessages}
      >
    [...]

Answer 1

您可以在匿名 function 中使用e.preventDefault() ，然后將e事件傳遞給handleSubmit function。

<MessageForm
  ref={formRef}
  name="nest-messages"
  onFinish={(e) => {
    e.preventDefault();
    handleSubmit(e);
  }}
  validateMessages={validateMessages}
>

我確實建議將state.succeeded檢查放在useEffect中，以避免在其他狀態更改時清除表單

useEffect(() => {
  if (state.succeeded) {
    formRef.current.resetFields();
    formRef.current.message.success("Sent");
  }
}, [state.succeeded]);