React 隐形 reCAPTCHA

Question

我正在使用react-google-recaptcha来实现不可见的ReCaptcha，将引用传递给ReCAPTCHA组件并this._reCaptchaRef.current.execute()在componentDidMount内部执行。https://stackblitz.com/edit/react-invisbile-recaptcha展示了使用 reCaptcha 的表单。

传递给验证码组件的 onChange 回调会将验证码的值设置为状态。初始渲染验证码值设置为状态，一切似乎都工作正常，单击提交按钮，状态值将打印到控制台上。

几秒钟后，如果我们点击提交并查看控制台，验证码的值为空。我尝试比较传递给 onChange 的值，如果它为 null，我会调用，但当 this._reCaptchaRef.current.execute()值为 null 时会出现问题，我们调用该函数，但第一个 on submit，验证码的值为 null，每次点击都会有状态中的值，直到变为 null。

如何调用提交按钮的验证码并将验证码的值传递给回调函数？

Answer 1

总体思路是，验证码令牌仅在一段时间内有效。这样令牌就不容易被其他计算机系统猜到。

您应该onSubmit只执行它，而不是在安装时执行验证码，因此用户在看到验证码时会填写表单（如果有的话）。

handleSubmit(event) {
  event.preventDefault();
  this._reCaptchaRef.current.execute()
}

这将依次触发onChange处理程序（或onError多个处理程序），您可以从那里提交表单。

但如果您想以某种方式将其保留在 中componentDidMount，您可以选择重置验证码并再次执行。

redoCaptcha() {
  this._reCaptchaRef.current.reset();
  this._reCaptchaRef.current.execute();
}
render() {
 ...
 <ReCAPTCHA
   onExpired={this.redoCaptcha}
 />
}