Google ReCaptcha 未在 jsx 组件呈现之前加载

Question

我正在尝试创建一个反应组件来处理我的 recaptcha。我需要使用数据回调来设置我的组件的值，因为我们没有使用表单标签。发生的事情是，通过 Google 的重新验证，他们通过 iframe 加载字段。这意味着我无法访问包含来自 Google 的响应的文本区域。只有在验证后我才需要获取 textarea 的值。我无法这样做，因为 API 在我的反应组件渲染之前没有加载。如果我尝试在我的组件中使用 grecaptcha，它是未定义的。但是，在页面加载后，我可以在控制台中使用 grecaptcha。

我目前尝试使用 recaptcha 的方式（如下所示）不起作用。对象 grecaptcha（由 google 创建的对象）未定义，数据回调永远不会被调用。

我宁愿避免使用插件或任何来自 github 的东西。这似乎不应该那么复杂。如果有任何帮助，我确实可以访问 lodash，以及 react-addons。

这在底部的正文标签中

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

这是 React 组件的 jsx。

(function() {
"use strict";

/**
 * Represents an HTML text element
 */
class Captcha extends COS.Input.Base
{
    getCaptchaResponse() {
        alert("working");
    }

    renderEdit()
    {
        return (
            <div
                ref="captcha"
                id="captcha"
                name="captcha"
                data-sitekey="6Lc9fg4TAAAAAGYyFskow-g2b4IQ_rLvsLkHicuS"
                data-callback={this.getCaptchaResponse}
                className="g-recaptcha"></div>
        );
    }

}

    Captcha.makeDefaultProps({
    // Extend Default Props here
    });

    COS.Input.Captcha = Captcha;
})();

Answer 1

我在 Whosebug 之外的帮助下解决了这个问题。我想回来解决这个问题。这是一个与我最初理解的不同的问题。我误解了回调函数的使用方式。它需要是全局函数名称的字符串。但是，这对我没有任何帮助，因为我需要验证码内部的响应 class.

下面的代码本质上是将我的回调附加到 window，然后在组件安装后呈现 recaptcha。我现在在 class 中有了我的回复，并且可以在我不使用表单标签

的情况下设置要提交的组件的值

这是现在的页脚行

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

(function() {
    "use strict";

    /**
     * Represents a Google ReCaptcha
     */
    class Captcha extends COS.Input.Base {

      getCaptchaResponse(response) {
        console.log(response);
      }

      renderEdit() {
        window['getCaptchaResponse'] = () => {
          grecaptcha.render("captcha", {
            sitekey: "6Lc9fg4TAAAAAGYyFskow-g2b4IQ_rLvsLkHicuS",
            callback: (this.getCaptchaResponse) ? this.getCaptchaResponse : undefined,
          });
        };

        return ( < div id = "captcha"
          ref = "captcha"
          name = "captcha"
          data-onloadcallbackname = {
            'getCaptchaResponse'
          }
          data-verifycallbackname = {
            'getCaptchaResponse'
          } >
          < /div>
            );
        }

    }

    Captcha.makeDefaultProps({
        / / Extend Default Props here
        });

      COS.Input.Captcha = Captcha;
    })();