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

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 />上添加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
);