问题:我正在使用react-recaptcha
库以我的ReactJS表单显示Google reCAPTCHA v2。 UI看起来不错,但是当我提交表单时,页面会重新加载,并且我从未在Netlify上收到任何表单提交。
尝试:删除reCAPTCHA和表单工作正常,并且我在Netlify中收到表单提交,因此问题与reCAPTCHA有关。
我正在使用create-react-app
作为React网站。
在Netlify form documentation之后,我为Google的reCAPTCHA v2 API密钥对设置了signed up,并在站点设置中设置了两个环境变量。
My Netlify environmental variables settings
有关要点,请参见以下要点:Github Gist
理论上,将其放在html中:
<script
src="https://www.google.com/recaptcha/api.js"
async
defer
></script>
而这在Form.js中:
<Recaptcha
sitekey={process.env.REACT_APP_SITE_RECAPTCHA_KEY}
theme="dark"
/>
应该可以正常工作,但是我不确定是什么原因导致表单提交后重新加载页面。
任何帮助将不胜感激!谢谢。
编辑:这不是一个
e.preventDefault()
问题,因为我使用Netlify来处理表单提交。提交表单后,它将把用户重定向到默认的表单成功页面。这里的问题是,一旦我在表单中添加reCAPTCHA,页面就会重新加载而不向我发送表单数据或重定向页面。甚至在我在表单提交中添加e.preventDefault()
处理程序之后。 最佳答案
如评论中所述,表单提交页面,这就是预期的行为。如果要避免这种情况,请在事件上调用preventDefault
。
<form onSubmit={this.handleSubmit}
处理程序看起来像这样
handleSubmit(event) {
event.preventDefault()