У меня есть страница "Свяжитесь с нами" в моем проекте activjs, и я использую избыточность и хранилище для управления состояниями в своей форме. Я добавляю компонентact-google-recaptcha.
Я зарегистрировался в Google Recaptcha и все в порядке. в свойстве onChange компонента recaptcha я хочу отправить действие setCaptcha, чтобы установить состояние капчи в моем редуксе.
Я использую базовую форму, и когда я вызываю действие set captcha, я получаю ошибку «Uncaught (in обещание)»!
мой контактUsFormComponent:
import React, {Component} from 'react';
import './ContactUs.css';
import ReCAPTCHA from "react-google-recaptcha";
import {
setCapcha,
} from "../../../redux/actions";
import {connect} from "react-redux";
import $ from "jquery";
class ContactUsForm extends Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
this.props.validateCapcha();
this.props.submitContactUs();
}
render() {
const recaptchaRef = React.createRef();
function onChange(value) {
if (value.length > 0)
this.props.setContactCapcha(value);
}
window.recaptchaOptions = {
lang: 'fa',
};
return (
<>
<form onSubmit={this.handleSubmit}>
.
.
.
<div className="row">
<div className="col-md-3 ">
<div className="rc-imageselect">
<ReCAPTCHA
ref={recaptchaRef}
size="normal"
sitekey="my site key here"
onChange={onChange}
/>
</div>
</div>
<div className="col-md-3 text-left">
<button style={{backgroundColor: "#4870f5"}} type="submit"
className="btn btn-primary register-btn font-13">submit
</button>
</div>
</div>
</form>
</div>
</>
)
}
}
function mapDispatchToProps(dispatch) {
return {
.
.
.
setContactCapcha: capcha => dispatch(setCapcha(capcha)),
};
}
const mapStateToPtops = (state) => {
return {
contactUsState: state.contactUsState
}
};
export default connect(mapStateToPtops, mapDispatchToProps)(ContactUsForm);
мой код редуктора:
.
.
.
export const contactUsReducer = (state = contactUsInitialState, action) => {
switch (action.type) {
.
.
.
case ACTION_SET_CAPCHA:
console.log("Captcha valueeeeeeeeeeeeee:", action.capcha);
return {...state, capcha: action.capcha};
.
.
.
default:
return state;
}
};
код моих действий:
.
.
.
export function setCapcha(capcha) {
return {
type: ACTION_SET_CAPCHA,
capcha:capcha
};
}
.
.
.