如何使用 Redux 表单实现 Google reCAPTCHA

Question

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

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);

问题是当我单击提交按钮时，我似乎无法获取对象中的recaptchacode字段values。如何绑定Recaptcha组件的值，redux-form以便将其放入values对象中？

由于 StackOverflow 需要我为此添加更多解释，因为代码太多，我正在编写此文本。

Answer 1

所以答案简而言之，因为我已经设法让这件事发挥作用。有两个 npm 包用于在 react 中实现 recaptcha：

react-recaptcha和react-google-recaptcha。您想要第二个而不是第一个（这是我的问题，不适用于 redux-form），然后您想按照本教程进行操作：https : //github.com/erikras/redux-form/issues/ 1880

希望这可以帮助某人。