时间戳

首页 > 解决方案 > Next.js 如何在我的联系表单中实现 react-google-recaptcha

reactjs - 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}
    />

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

我尝试添加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();
  };

标签： reactjsnext.jsrecaptchareact-google-recaptcha

解决方案

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

推荐阅读