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

Question

我正在尝试在我的联系人表单上实现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}
    />

这当然不起作用，因为即使触发了recaptcha，它也会发送表单。

我尝试在<ReCAPTCHA />上添加onChange={onReCAPTCHAChange}，但得到一个错误的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();
  };

Answer 1

我认为在你的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
);