0

我在网站的表单页面上使用 npm react-google-recaptcha 包来实现 google recaptcha v2 复选框

<ReCAPTCHA sitekey={KEY} onChange={this.captchaOnChange} />

一旦验证了验证码，我就会触发 captchaOnChange 函数来记录来自谷歌 API 的响应并将触发器值设置为 true，这将在我的代码中进一步使用（我尝试了以下代码的多个版本，一个只有异步，一个没有异步和一个异步和等待）

    captchaOnChange = async (value) => {
    this.setState({
      captchaValue: value,
      clicked: true,
    });
  };

一旦提交表格，我正在使用

window.grecaptcha.reset()

重置recaptcha

现在的问题是，当用户第一次单击recaptcha 时，它工作正常，并且立即在recaptcha 上可见绿色勾号，但是在重置验证码并且用户想要再次提交表单并单击recaptcha 时提交表单后没有绿色勾号，它的加载持续不断，就像它被困在某个循环中一样，而且我正在检查检查元素的网络选项卡，在加载时没有向任何 recaptcha api 发送请求。

所以我怀疑在使用 recaptcha.reset()后onChange事件是否存在问题，我也发现一些人在互联网上报告了类似的问题，但我不确定它是否有任何问题或我们的实施问题。

请帮忙！！

4

1 回答 1

0

与 Ref 一起使用

import ReCAPTCHA from "react-google-recaptcha";
 
 
const ReCAPTCHAForm = (props) => {
  const recaptchaRef = React.useRef();
 
  const onSubmitWithReCAPTCHA = async () => {
    const token = await recaptchaRef.current.executeAsync();
 
    // apply to form data

    // reset the captcha 
    recaptchaRef.current.reset()
  }
 
  return (
    <form onSubmit={onSubmitWithReCAPTCHA}>
      <ReCAPTCHA
        ref={recaptchaRef}
        size="invisible"
        sitekey="Your client site key"
      />
    </form>
  )
 
}
 
ReactDOM.render(
  <ReCAPTCHAForm />,
  document.body
);

包文档中的更多信息

于 2021-09-10T08:26:41.407 回答