0

Возникла задача прикрутить к форме recaptcha invisible. Соответственно есть необходимость вызывать рекаптчу в момент отправки данных.

Итак я имею контейнер вызывающий мою redux-form

export class Registration extends React.Component {
onSubmit = (values, dispatch) => {
    return new Promise((resolve, reject) => {
        return dispatch(
            { type: REGISTRATION_FORM_REQUEST, values, resolve, reject },
            dispatch
        );
    });
};

render() {
    const { recaptchaKey } = this.props;
    return (
        <RegistrationForm recaptchaKey={recaptchaKey} onSubmit={this.onSubmit} />
    );
  }
}

Для рекаптчи в форме используется компонент react-google-recaptcha

У формы на onSubmit такая конфигурация: Метод слушает отправку формы.

const handleSubmit = event => {
        event.preventDefault();
        this.captcha.execute();
        stopSubmit("registrationForm");
        console.log(event);
        console.log(this.captcha);
        return false;
};

Код самой формы такой

.....
<form className={classes.container} onSubmit={handleSubmit}>
....
<FormControl className={classes.formControl}>
    <Field
        badge="inline"
        size="invisible"
        name="g-recaptcha-response"
        recaptchaKey={recaptchaKey}
        value={this.state["g-recaptcha-response"]}
                onChange={e => {
                    this.setState({
                    "g-recaptcha-response": e
                });
        }}
        component={this.renderCaptcha}
    />
</FormControl>
...
</form>

При отправке формы, обработчик вызывается, вызывается и выполнение recaptcha, но вот тут небольшая проблема. Форма все равно отправляется и в этот момент код g-recaptcha-response еще пустой. Как сделать что бы форма не отправлялась до момента получения значения g-recaptcha-response. Если кликнуть второй раз, то порядок. Кажется тут вопрос больше не про recaptcha, а про остановку отправки формы.

Буду благодарен за любой совет.

1 ответ 1

0

Сам смог найти решение. Публикую, возможно кому-то пригодится. Немного переделал контейнер

export class Registration extends React.Component {
    onSubmit = (values, dispatch) => {
        return new Promise((resolve, reject) => {
        // Пустой код ReCaptcha <--- Ключевой момент. Создаю ошибку
        if (this.props.recaptchaKey && !values["g-recaptcha-response"]) {
           throw new SubmissionError({ _error: RECAPTCHA_NEED_EXEC });
        }
        return dispatch(
           { type: REGISTRATION_FORM_REQUEST, values, resolve, reject },
        dispatch
    );
});

render() {
    const { recaptchaKey } = this.props;
    return (
        <RegistrationForm recaptchaKey={recaptchaKey} onSubmit={this.onSubmit} />
    );
  }
}

В самой форме сделал обработку свойства ошибки

componentWillReceiveProps(nextProps) {
    if (nextProps.error === RECAPTCHA_NEED_EXEC) {
        this.captcha.execute();
    }
}

А в свойстве "g-recaptcha-response" слушаю изменения onChange

const handleChange = value => {
    onChange(value);
    if (value) {
        this.props.dispatch(submit("registrationForm"));
    }
};

Таким образом форму посетитель отправляет один раз, если секретный код будет пустой, то будет вызвана валидация Recaptcha и после успешного прохождения recaptcha, форма отправится повторно автоматически. Еще нужно после отправки делать очистку поля рекаптчи "g-recaptcha-response", что бы рекаптча при возможной повторной отправки перевалидировалась снова, но это уже мелочи и я не стал приводить к этому пример.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.