Next.js 如何在我的联系表单中实现 react-google-recaptcha

问题描述

我正在尝试在 Next.js 中的联系表单上实施 Google Recaptcha。它会在需要时弹出挑战，但无论如何都会发送表单。 到目前为止，这是我的代码：

  // Recaptcha
  const recaptchaRef = useRef();

  // Form validation
  const [validated,setValidated] = useState(false);

  // Reset form
  const formRef = useRef();
  const handleReset = () => {
    formRef.current.reset();
    setValidated(false);
  };

  // Thank you Message
  const [thankYouMessage,setThankYouMessage] = useState(false);

  // Form submit handler
  async function handleSubmit(e) {
    e.preventDefault();
    e.stopPropagation();

    // Execute the reCAPTCHA when the form is submitted
    recaptchaRef.current.execute();

    const formData = new FormData();

    Array.from(e.currentTarget.elements).forEach((field) => {
      if (!field.name) return;
      formData.append(field.name,field.value);
    });

    await fetch(process.env.NEXT_PUBLIC_wordpress_CF7_ENDPOINT,{
      body: formData,method: "POST",})
      .then((response) => response.json())
      .then((response) => {
        if (response.status === "mail_sent") {
          setThankYouMessage(!thankYouMessage);
        } else if (response.status === "mail_Failed") {
          alert("Message Failed to send.");
        }
      });

    setValidated(true);
    handleReset();
    recaptchaRef.current.reset();
  }

在表格上：

  <Form
    ref={formRef}
    validated={validated}
    onSubmit={handleSubmit}
  >
    <ReCAPTCHA
      ref={recaptchaRef}
      size="invisible"
      sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
    />

这当然不起作用，因为即使触发了重新验证码，它仍然会发送表单。

我曾尝试在 onChange={onReCAPTCHAChange} 上添加 <ReCAPTCHA />，但出现错误 Uncaught (in promise) ReferenceError：

  const onReCAPTCHAChange = (captchaCode) => {
    // If the reCAPTCHA code is null or undefined indicating that
    // the reCAPTCHA was expired then return early
    if (!captchaCode) {
      return;
    }
    // Else reCAPTCHA was executed successfully so proceed with the
    // alert
    alert(`hey,${email}`);
    // Reset the reCAPTCHA so that it can be executed again if user
    // submits another email.
    recaptchaRef.current.reset();
  };

解决方法

我认为在你的 handleSubmit 中你可以使用 executeAsync 这样的方法（如官方文档中所示），这样你应该能够在 handleSubmit 中编写所有内容：

import ReCAPTCHA from "react-google-recaptcha";
 
 
const ReCAPTCHAForm = (props) => {
  const recaptchaRef = React.useRef();
 
  const handleSubmit = async () => {
    try {
       const token = await recaptchaRef.current.executeAsync();
       // Add your API call code here also pass token to API
    } catch(error) {
      // handle validation error
    }
 
    
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <ReCAPTCHA
        ref={recaptchaRef}
        size="invisible"
        sitekey="Your client site key"
      />
    </form>
  )
 
}
 
ReactDOM.render(
  <ReCAPTCHAForm />,document.body
);