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組件渲染之前加載

回答

相關問題