如何實現谷歌的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); 

的問題是，我似乎無法時候才能在values對象recaptchacode場我點擊提交按鈕。如何將Recaptcha組件的值綁定到redux-form，以便將它放入values對象中？

而且由於StackOverflow的希望我更多的解釋加入到這一點，因爲有太多的代碼，我寫這篇文字。

Answer 1

因此，在短期的答案，因爲我設法讓這件事的工作。有在執行驗證碼2個NPM包反應：

react-recaptcha和react-google-recaptcha。你想要第二個，而不是第一個（這是我的問題，不能與REDX形式工作），然後你想要按照本教程：https://github.com/erikras/redux-form/issues/1880

希望這可以幫助別人。