在使用 react-google-recaptcha npm 包的 recaptcha v2 中的 window.reacptcha.reset() 之后 onChange 事件不起作用 - [recaptcha 只是继续加载]

Question

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

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

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

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

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

window.grecaptcha.reset()

重置验证码

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

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

请帮忙！！

Answer 1

与参考一起使用

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
);

更多信息package docs