Question

我在反应中看不见recapcha时遇到问题。我在模态窗口中有注册表，如果recaptcha是显示，并且我被检测为机器人，难题框正在发送用户到页面底部。猜谜游戏增加了一个 div到DOM并使用top：的最大值进行定位屏幕属性。

这是我正在使用的npm软件包 https://www.npmjs.com/package/react-google-recaptcha

export class Registration extends React.Component {
   onRecaptchaChange = (recaptchaResponse) => {
    const data = {
      form: this.state.form,
      recaptchaResponse,
    };

    this.props.submitQuickSignupDetails(data);
  };

  submitQuickSignupDetails = (form) => {
    this.setState({ form: form.toJS() });
    this.captcha.reset();
    this.captcha.execute();
  };

  render() {
    return (
     <React.Fragment>
       <RegistrationForm
         onSubmit={this.submitQuickSignupDetails}
         onAlreadyRegistered={this.props.hideSignupModal}
        />
       <ReCaptcha
        ref={(ref) => { this.captcha = ref; }}
        sitekey={XXXXXXX}
        size="invisible"
        badge="bottomleft"
        onChange={this.onRecaptchaChange}
       />
    </React.Fragment>
   );
  }
}

就目前而言，仅在第一次触发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,
  });
});

};

但是，如果用户在解决Recaptcha难题时犯了错误，则Recaptcha会将用户再次转到页面底部

提交redux表单时看不见的reacaptcha位置问题

0 个答案: