Google ReCaptcha无法在jsx组件渲染之前加载

我正尝试创建一个反应组件来处理我的recaptcha。我需要使用数据回调来设置我的组件的值，因为我们没有使用表单标签。结果是，通过Google的recaptcha，他们通过iframe加载该字段。这意味着我无法访问包含Google响应的textarea。我需要在验证后才能得到textarea的值。我被阻止这样做，因为API在我的反应组件呈现之前未加载。如果我尝试在我的组件中使用grecaptcha，它是未定义的。但是，在页面加载后，我可以在控制台中使用grecaptcha。Google ReCaptcha无法在jsx组件渲染之前加载

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

我宁愿避开使用github上的插件或任何东西。这似乎不应该那么复杂。如果有什么帮助的话，我可以访问lodash，以及反应插件。

这是身体标记在底部

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

下面是阵营组件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; 
})();

来源

2015-10-13 thepriebe

我想通了一些帮助之外的计算器。我想回来解决这个问题。这是一个与我最初理解的不同的问题。我误解了回调函数的用法。它需要是一个全局函数名称的字符串。但是，这并没有帮助我，因为我需要Captcha类中的响应。

下面的代码实质上是将我的回调函数附加到窗口，然后在组件装入之后呈现recaptcha。我现在有这个类里面我的反应，并且可以设置组件的价值在我的方案提交不使用表单标签

这是页脚行现在

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

的

来源

2015-10-14 18:30:36 thepriebe

Google ReCaptcha无法在jsx组件渲染之前加载

回答

相关问题