问题:我正在使用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()

07-24 09:43
查看更多