Javascript 提交redux表单时出现不可见的reacaptcha位置问题

我对react中的隐形recaptcha有问题。 我在模态窗口中有注册表格，如果重新注册 当我被检测为机器人时，益智盒正在发送 将用户添加到页面底部。recaptcha难题添加了一个 div到DOM，用于定位的是使用 屏幕属性

这是我正在使用的npm包

导出类注册扩展React.Component{
onRecaptchaChange=（recaptchaResponse）=>{
常数数据={
表格：this.state.form，
重申责任，
};
this.props.submitQuickSignupDetails（数据）；
};
submitQuickSignupDetails=（表单）=>{
this.setState（{form:form.toJS（）}）；
这个.captcha.reset（）；
this.captcha.execute（）；
};
render（）{
返回(
{this.captcha=ref；}}
sitekey={XXXXXXX}
size=“不可见”
badge=“左下角”
onChange={this.onrecomptchachchange}
/>
);
}
}

目前，只有在第一次触发recaptcha时才解决我的问题的唯一可能解决方案是：

submitQuickSignupDetails = (form) => {
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    const nodesList = mutation.addedNodes;
    for (let idx = 0; idx < nodesList.length; idx += 1) {
      const node = nodesList.item(idx);

      if (node.tagName && node.tagName === 'DIV' && node.querySelector('iframe[title="recaptcha challenge"]')) {
        const visibilityInterval = setInterval(() => {
          if (node.style.visibility === 'visible') {
            node.style.top = `${window.scrollY + 150}px`;
            clearInterval(visibilityInterval);
            observer.disconnect();
          }
        }, 250);
      }
    }
  });
});

this.setState({ form: form.toJS() });
this.captcha.reset();
this.captcha.execute().then(() => {
  observer.observe(document.body, {
    childList: true,
  });
});

submitQuickSignupDetails=（表单）=>{
常量观察者=新的突变观察者（（突变）=>{
突变。forEach（（突变）=>{
const nodesList=突变。添加节点；
for（设idx=0；idx{
如果（node.style.visibility==='visible'）{
node.style.top=`${window.scrollY+150}px`；
clearInterval（可视性间隔）；
observer.disconnect（）；
}
}, 250);
}
}
});
});
this.setState（{form:form.toJS（）}）；
这个.captcha.reset（）；
这个.captcha.execute（）。然后（（）=>{
观察者，观察者（文件主体{
儿童名单：是的，
});
});

})

但是，如果用户在解决recaptcha难题时出错，则recaptcha会再次将用户发送到页面底部

submitQuickSignupDetails = (form) => {
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    const nodesList = mutation.addedNodes;
    for (let idx = 0; idx < nodesList.length; idx += 1) {
      const node = nodesList.item(idx);

      if (node.tagName && node.tagName === 'DIV' && node.querySelector('iframe[title="recaptcha challenge"]')) {
        const visibilityInterval = setInterval(() => {
          if (node.style.visibility === 'visible') {
            node.style.top = `${window.scrollY + 150}px`;
            clearInterval(visibilityInterval);
            observer.disconnect();
          }
        }, 250);
      }
    }
  });
});

this.setState({ form: form.toJS() });
this.captcha.reset();
this.captcha.execute().then(() => {
  observer.observe(document.body, {
    childList: true,
  });
});