如何实现谷歌的reCAPTCHA随着终极版形式

问题描述：

我有，我有这样定义的联系人形式的联系页面：如何实现谷歌的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._%+-][email protected][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对象中？

而且由于*的希望我更多的解释加入到这一点，因为有太多的代码，我写这篇文字。

答

因此，在短期的答案，因为我设法让这件事的工作。有在执行验证码2个NPM包反应：

react-recaptcha和react-google-recaptcha。你想要第二个，而不是第一个（这是我的问题，不能与REDX形式工作），然后你想要按照本教程：https://github.com/erikras/redux-form/issues/1880

希望这可以帮助别人。

如何实现谷歌的reCAPTCHA随着终极版形式

相关推荐