Невидимая проблема положения реактива при отправке формы - PullRequest
Новая
       34

Невидимая проблема положения реактива при отправке формы

0 голосов
/ 17 января 2019

У меня проблема с невидимым recaptcha в реакции. У меня есть форма регистрации в модальном окне, и если recaptcha показал, и я обнаружил, как бот, коробка головоломки отправляет пользователь внизу страницы. Головоломка recaptcha добавляет div для DOM и для позиционирования использует верх: максимум свойство экрана.

Это пакет 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,
  });
});

};

Но если пользователь допустил ошибку при разрешении головоломки рекапчи, рекаптча снова отправляет пользователя вниз страницы

...