提交表单后为什么页面会重新加载？ （反应/ Netlify /反应-摘要）

Question

问题： ：我正在使用react-recaptcha库以我的ReactJS表单显示Google reCAPTCHA v2。用户界面看起来不错，但是当我提交表单时，页面会重新加载，并且我从未在Netlify上收到任何表单提交。

尝试： 删除reCAPTCHA和表单工作正常，并且我在Netlify中收到了表单提交，因此问题与reCAPTCHA有关。 >

我正在使用 create-react-app 来建立反应网站。

在Netlify form documentation之后，我有signed up用于Google的reCAPTCHA v2 API密钥对，并在站点设置中设置了两个环境变量。

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"
 />

应该可以使它工作，但是我不确定是什么原因导致表单提交后重新加载页面。

任何帮助将不胜感激！谢谢。

编辑：这不是{strong>不是一个e.preventDefault()问题，因为我正在使用Netlify来处理表单提交。提交表单后，它将把用户重定向到默认的表单成功页面。这里的问题是，一旦我在表单中添加reCAPTCHA，页面就会重新加载而不向我发送表单数据或重定向页面。甚至在我在表单提交中添加e.preventDefault()处理程序之后。

Answer 1

像评论中所述，表单提交页面，这就是预期的行为。如果您想避免这种情况，请在事件上致电preventDefault。

<form onSubmit={this.handleSubmit}

处理程序看起来像这样

handleSubmit(event) {
  event.preventDefault()

Answer 2

对我有用的

在Netlify中，我添加了一个REACT_APP_前缀的环境变量。

例如如果我有这些环境变量：

1. SITE_KEY = 123
2. SITE_SECRET = abc

我添加了这些：

1. REACT_APP_SITE_KEY = 123
2. REACT_APP_SITE_SECRET = abc

因此，在Netlify仪表板中，我总共有：

1. SITE_KEY = 123
2. SITE_SECRET = abc
3. REACT_APP_SITE_KEY = 123
4. REACT_APP_SITE_SECRET = abc