如何解决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
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。