Google ReCaptcha не загружается до рендеринга jsx-компонента

Question

Я пытаюсь создать компонент реакции для обработки моего recaptcha. Мне нужно использовать обратный вызов данных, чтобы установить значение моего компонента, так как мы не используем теги формы. Что происходит, так это то, что через recaptcha Google они загружают поле через iframe. Это означает, что у меня нет доступа к текстовой области, содержащей ответ от Google. Мне нужно получить значение текстового поля только после его проверки. Я не могу этого сделать, потому что API не загружается до рендеринга моего компонента. Если я пытаюсь использовать grecaptcha в моем компоненте, он не определен. Однако после загрузки страницы я могу использовать grecaptcha в консоли.

Способ, которым я пытаюсь использовать recaptcha, как показано ниже, не работает. Объект grecaptcha (тот, который создан Google) не определен, и вызов-вызов никогда не вызывается.

Я бы предпочел уклониться от использования плагина или чего-нибудь из github. Кажется, это не должно быть так сложно. У меня есть доступ к lodash, если что-нибудь там поможет, а также аддон-аддоны.

Это в тегах тела в нижней

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

Вот JSX для React компонента.

(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

Я понял это с некоторой помощью за пределами stackoverflow. Я хотел вернуться и решить эту проблему. Это была другая проблема, чем я изначально понял. Я неправильно понял, как была использована функция обратного вызова. Это должно быть строка имени глобальной функции. Однако это не помогло мне вообще, потому что мне нужен ответ внутри класса 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; 
    })();