Перепрошивка по компоненту React - PullRequest
Новая
       6

Перепрошивка по компоненту React

0 голосов
/ 06 ноября 2018

Я пытаюсь разрешить вызов recaptcha для установки значения состояния в действительном ответе.

В своем основном index.html я загружаю код рекапчи: 

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

Затем, в моем компоненте формы, я загружаю вызов recaptcha под моей формой: 

<div className="g-recaptcha" data-sitekey="MySiteKey">Here</div>

Итак, я вижу, как появляется рекапча. И когда я ставлю галочку, это работает. Я получил зеленую галочку. Однако я хочу, чтобы он вызывал метод для моего компонента, который устанавливает свойство в моем состоянии. Оттуда я могу включить кнопку отправки, а также разрешить ее проверку перед отправкой вызова API для публикации данных в моем API.

Похоже, я могу добавить метод обратного вызова в тег Script ... но тогда я не могу по-настоящему использовать свое состояние, и так как тег script находится в моем index.html - я не могу действительно использовать свой компонент Метид легко, так как он связан с «этим». 

this.OnRecaptchaValidated = OnRecaptchaValidated.bind(this);

Я бы предпочел не использовать пакет NPM, чтобы сделать это, поскольку я думал, что использование javascript будет простым, но, возможно, это не так. Есть ли способ присоединить мою функцию обратного вызова в моем компоненте к этому вызову recaptcha>

В идеале, я могу добавить метод обратного вызова к этому div, но я не могу понять, как.

1 Ответ

0 голосов
/ 06 ноября 2018

Если бы я был вами, я бы не стал добавлять скрипт капчи прямо в основной файл index.html, поскольку у нас не было бы полного контроля над ним, а скорее я буду вызывать его внутри своего компонента React, создавая пользовательскую функцию для загрузите его скрипт, затем используйте пользовательскую функцию обратного вызова!

Вот что я имею в виду: 

function loadScript(url, cb) {
  const head = document.getElementsByTagName("head")[0]
  const srcipt = document.createElement("script")
  script.src = url
  head.appendChild(script)
  script.onload = myCallback()
}

function myCallback() {
  // Do whatever you want
}

Вы можете использовать вашу функцию loadScript в любом месте вашего приложения React, вы даже можете использовать ее с Lifecycle Events, если это необходимо.

...