Возникла задача прикрутить к форме 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, а про остановку отправки формы.
Буду благодарен за любой совет.