时间戳

首页 > 解决方案 > 为什么提交表单后页面会重新加载？(React/Netlify/react-recaptcha)

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

问题描述

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

尝试：删除 reCAPTCHA 和表单工作正常，我在 Netlify 中收到表单提交，所以问题与 reCAPTCHA 有关。

我正在create-react-app用于反应网站。

按照 Netlify表单文档，我已经从 Google注册了一个 reCAPTCHA v2 API 密钥对，并在站点设置中设置了两个环境变量。

我的 Netlify 环境变量设置

相关代码可在此 gist 中找到：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()在表单提交中添加了一个处理程序之后也是如此。

标签： javascriptreactjsrecaptchanetlify

解决方案

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

<form onSubmit={this.handleSubmit}

处理程序看起来像这样

handleSubmit(event) {
  event.preventDefault()

推荐阅读