Question

我正在尝试使Recaptcha挑战启用在有效响应上设置状态值。

在我的主要index.html中，我加载了Recaptcha代码：

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

然后，在我的表单组件中，我将我的Recaptcha挑战加载到我的表单下：

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

所以，我看到了Recaptcha。当我“勾选”它时，它就起作用了。我得到一个绿色的勾。但是，我希望它调用组件上的方法，该方法将状态设置为我的状态。从那里，我可以启用“提交”按钮，并且还可以在发送api调用以将数据发布到我的API之前对其进行检查。

看起来我可以向Script标签添加回调方法...但是后来我不能真正使用状态，并且因为script标签在index.html中-我不能真正使用我的组件methid很容易，因为它绑定到“ this”。

this.OnRecaptchaValidated = OnRecaptchaValidated.bind(this);

我不希望使用NPM软件包来执行此操作，因为我曾认为使用javascript会很简单，但似乎并非如此。有没有办法将我组件中的回调函数附加到此Recaptcha挑战>

理想情况下，我可以在该div中添加一个回调方法，但似乎看不出来。

Answer 1

如果您是我，我不会将验证码脚本直接添加到主index.html文件中，因为我们无法完全控制它，而是通过创建一个自定义控件在我的React Component中调用它函数来加载其脚本，然后有一个自定义的回调函数！

这是我的意思：

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
}

您可以在React App中的任何地方使用loadScript函数，如果需要，甚至可以与Lifecycle Events一起使用。

关于React组件的摘要

1 个答案: