Reactjs 如何使用Redux表单实现Google reCAPTCHA

我有一个联系人页面，在该页面上我有一个如下定义的联系人表单：

import React from "react";
import { Field, reduxForm } from "redux-form";
import Recaptcha from "react-recaptcha";

const required = value => (value ? undefined : "This field is required.");
const email = value => value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address." : undefined;

const renderInput = ({
    input,
    label,
    type,
    meta: { touched, error }
}) => (
    <div className="form-group">
        <label className="col-sm-2 control-label">{ label }</label>
        <div className="col-sm-10">
            { (type == "text" || type == "email") ? <input { ...input } type={ type } /> : <textarea { ...input }></textarea> }
            { touched && ((error && <span className="contact-form-error-message">{ error }</span>)) }
        </div>
    </div>
);

const captcha = (props) => (
    <div className="form-group">
        <label className="col-sm-2 control-label"></label>
        <div className="col-sm-10">
            <Recaptcha render="explicit" onloadCallback={ console.log.bind(this, "reCAPTCHA loaded.") }
                sitekey="XXXXXXXXXXXXXXXXX" onChange={props.input.onChange} />
        </div>
    </div>
);

const ContactForm = props => {
    const { handleSubmit, submitting } = props
    return (
        <form className="form-horizontal" onSubmit={ handleSubmit }>
            <Field
                name="name"
                type="text"
                component={ renderInput }
                label="Name:"
                validate={ required }
            />
            <Field
                name="email"
                type="email"
                component={ renderInput }
                label="Email:"
                validate={ [required, email] }
            />
            <Field
                name="subject"
                type="text"
                component={ renderInput }
                label="Subject:"
                validate={ required }
            />
            <Field
                name="message"
                type="textarea"
                component={ renderInput }
                label="Message:"
                validate={ required }
            />
            <Field name="recaptchacode" component={ captcha } />
            <div className="form-group">
              <label className="col-sm-2 control-label"></label>
              <div className="col-sm-10">
                  <button type="submit" id="contact-form-button" disabled={ submitting }>Send</button>
              </div>
            </div>
        </form>
    )
}

export default reduxForm({
    form: "ContactForm"
})(ContactForm);

从“React”导入React；
从“redux表单”导入{Field，reduxForm}；
从“react Recaptcha”导入Recaptcha；
const required=value=>（值？未定义：“此字段是必需的。”）；
const email=value=>value&&/^[A-Z0-9.\%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.测试（值）？“无效的电子邮件地址。”：未定义；
常量renderInput=({
输入，
标签，
类型，
元：{触摸，错误}
}) => (
{label}
{（类型==“文本”| |类型==“电子邮件”）？：}
{触摸&（（错误&&{error}））}
);
常量验证码=（道具）=>(
);
const ContactForm=props=>{
const{handleSubmit，submiting}=props
返回(
发送
)
}
导出默认reduxForm({
表格：“联系表格”
})（联系方式）；

问题是，当我单击submit按钮时，我似乎无法在

值

对象中获取

recaptchacode

字段。如何将

Recaptcha

组件的值绑定到

redux表单

，以便将其放入

values

对象中

---

由于代码太多，StackOverflow希望我对此进行更多解释，所以我正在写这篇文章。

因此，简单地说，我已经设法让这件事正常工作了。有两个npm包用于在react中实施recaptcha：

react-recaptcha

和

react-google-recaptcha

。您想要第二个而不是第一个（这是我的问题，不适用于redux表单），然后您想要遵循本教程：

---

希望这对其他人有所帮助。

以下是我如何将Google ReCaptcha与React和redux表单以及语言支持集成在一起的。希望这能帮助别人

版本：
反应：16.5.2
react google recaptcha:1.0.5
反应还原：5.0.6
redux:3.7.2
redux表单：7.2.0

Redux表格：

import React from 'react';
import {
    reduxForm,
    Field,
    formValueSelector,
    change,
} from 'redux-form';
import { testAction } from ‘/actions';
import { connect } from 'react-redux';
import Captcha from './Captcha';

const validate = values => {
    const errors = {};

    if (!values.captchaResponse) {
        errors.captchaResponse = 'Please validate the captcha.';
    }

    return errors;
};

let TestForm = (props) => {
    const {
        handleSubmit,
        testAction,
        language, //extract language from props/or hard code it in Captcha component 
    } = props;

    return (
        <Form onSubmit={ handleSubmit(testAction)}>
        <Field component={Input} name=“other_input_name” type="text" required/>
                <Field dispatch={props.dispatch} component={Captcha} change={change} language={language} name="captchaResponse"/> {/* Pass redux-forms change and language to the Captcha component*/}
                 <Button type="submit">{‘Validate’}</Button>
        </Form>
    );
};

const selector = formValueSelector('testForm');

TestForm = connect(
    state => ({
        recaptchaValue: selector(state, 'captchaResponse'),
    }),
    { testAction: testAction }
)(TestForm);

export default reduxForm({
    form: ‘testForm’,
    validate,
    enableReinitialize: true,
})(TestForm);

从“React”导入React；
进口{
reduxForm，
领域
formValueSelector，
改变
}来自“redux形式”；
从“/actions”导入{testAction}；
从'react redux'导入{connect}；
从“/Captcha”导入验证码；
常量验证=值=>{
常量错误={}；
如果（！values.captchaResponse）{
errors.captchaResponse='请验证验证码'；
}
返回错误；
};
让TestForm=（道具）=>{
常数{
手推，
遗嘱，
语言，//从道具中提取语言/或在Captcha组件中硬编码
}=道具；
返回(
{/*将redux表单更改和语言传递给Captcha组件*/}
{'Validate'}
);
};
常量选择器=formValueSelector（'testForm'）；
TestForm=connect(
状态=>({
recaptchaValue:选择器（状态为“CaptCharResponse”），
}),
{testAction:testAction}
)（测试表格）；
导出默认reduxForm({
表单：“testForm”，
验证
enableReinitialize:true，
})（测试表格）；

验证码组件：

import React, { Component } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import styled from 'styled-components';
import { change } from 'redux-form';

class Captcha extends Component {
    constructor(props) {
        super(props);
        window.recaptchaOptions = { lang: this.props.language }; //set language that comes from props E.g.: fr/es/en etc..
    }

    onChange = (value) => {
        this.props.meta.dispatch(change(‘testForm’, 'captchaResponse', value));
    };

    render() {
        const { meta: { touched, error } } = this.props;

        return (
            <CaptchaWrapper>
                <ReCAPTCHA
                    sitekey={‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’}
                    onChange={response => this.onChange(response)}
                />
                <ErrorMessage>{ touched ? error : '' }</ErrorMessage>
            </CaptchaWrapper>
        );
    }
}

const CaptchaWrapper = styled.div`
`;

const ErrorMessage = styled.p`
    color: red;
`;

export default Captcha;

import React，{Component}来自'React'；
从“react google ReCAPTCHA”导入ReCAPTCHA；
从“样式化组件”导入样式化；
从'redux form'导入{change}；
类Captcha扩展组件{
建造师（道具）{
超级（道具）；
window.repactchaoptions={lang:this.props.language}；//设置来自props的语言，例如：fr/es/en等。。
}
onChange=（值）=>{
this.props.meta.dispatch（更改（'testForm'，'captchaResponse'，value））；
};
render（）{
const{meta:{toucted，error}}=this.props；
返回(
this.onChange（响应）}
/>
{触摸？错误：“”
);
}
}
const captchawapper=styled.div`
`;
const ErrorMessage=styled.p`
颜色：红色；
`;
导出默认验证码；

你应该接受你自己的答案，它救了我一天！干杯，伙计！很高兴这真的帮助了某人。