javascript - 为什么提交表单后页面会重新加载？ (React/Netlify/react-recaptcha)

Question

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

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

我正在使用 create-react-app 作为 React 网站。

关注 Netlify form documentation ，我有signed up获取来自 Google 的 reCAPTCHA v2 API key 对，并在站点设置中设置两个环境变量。

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() 处理程序之后也是如此。

Answer 1

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

<form onSubmit={this.handleSubmit}

处理程序看起来像这样

handleSubmit(event) {
  event.preventDefault()