Question

我试图获得重新回复，以便我可以通过redux-form传递它。
尝试了以下两种方法......

尝试1 ：
在<head>中指定回调。

的index.html ：

<script src='https://www.google.com/recaptcha/api.js?onload=callback&render=explicit'></script>

这里的问题是回调是全局范围的，但我需要在React组件中访问它。

尝试2 ：
在DOM中指定回调。

组件：handleRecaptcha（resp）

handleRecaptcha(resp) {
  console.log(resp);
}

组件：render（）：

<div className="g-recaptcha" data-callback={this.handleRecaptcha.bind(this)}  data-sitekey="***"></div>

的index.html ：

<script src='https://www.google.com/recaptcha/api.js'></script>

我在提交recaptcha后收到消息ReCAPTCHA couldn't find user-provided function: function () { [native code] }。可能也是一个范围问题。

我试图避免使用另一个图书馆，因为我认为这是一个相当微不足道的问题有人会碰巧知道如何去做吗？

我需要的只是获取widget实例，然后执行grecaptcha.getResponse(widget)以获得响应。 API ref

Answer 1

使用react-recaptcha

import Recaptcha from 'react-recaptcha'

<Recaptcha
  sitekey="xxxxxxxxxxxxxxxxxxxx"
  render="explicit"
  verifyCallback={verifyCallback}
  onloadCallback={callback}
/>

Answer 2

您也可以尝试Reaptcha。

它更干净，更现代，并且在处理reCAPTCHA小部件时有更多的React-way方法。

<Reaptcha 
  sitekey="YOUR_API_KEY" 
  onVerify={() => {
    // Do something
  }}
/>

如何在create react app中添加google recaptcha？

2 个答案: