Comment faire pour mettre en œuvre le formulaire Google reCAPTCHA avec Redux

Question

J'ai une page de contact sur laquelle j'ai un formulaire de contact défini comme ceci:

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

Le problème est que je ne peux pas sembler obtenir le champ recaptchacode dans l'objet values lorsque Je clique sur le bouton soumettre. Comment lier la valeur du composant Recaptcha à redux-form de sorte qu'il le place dans l'objet values?

Et puisque StackOverflow veut que j'y ajoute plus d'explications parce qu'il y a trop de code, j'écris ce texte.

Answer 1

Donc, la réponse en bref que j'ai réussi à faire fonctionner cette chose. Il y a deux paquets npm pour mettre en oeuvre recaptcha en réaction:

react-recaptcha et react-google-recaptcha. Vous voulez le second et non le premier (qui était mon problème et ne fonctionne pas avec redux-form) et ensuite vous voulez suivre ce tutoriel: https://github.com/erikras/redux-form/issues/1880

Espérons que cela aide quelqu'un.