Reactjs 如何在Ant设计表单组件中使用GoogleReCAPTCHA？

我正在尝试使用，以下是我的源代码：

import React from 'react';

import 'antd/dist/antd.css';
import Form from 'antd/lib/form';
import Input from 'antd/lib/input';
import Tooltip from 'antd/lib/tooltip';
import Icon from 'antd/lib/icon';
import Cascader from 'antd/lib/cascader';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import Checkbox from 'antd/lib/checkbox';
import Button from 'antd/lib/button';

import Recaptcha from 'react-recaptcha';


const FormItem = Form.Item;

const residences = [{
  value: 'zhejiang',
  label: 'Zhejiang',
  children: [{
    value: 'hangzhou',
    label: 'Hangzhou',
    children: [{
      value: 'xihu',
      label: 'West Lake',
    }],
  }],
}, {
  value: 'jiangsu',
  label: 'Jiangsu',
  children: [{
    value: 'nanjing',
    label: 'Nanjing',
    children: [{
      value: 'zhonghuamen',
      label: 'Zhong Hua Men',
    }],
  }],
}];

class RegisterForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      passwordDirty: false,
    };
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  handlePasswordBlur(e) {
    const value = e.target.value;
    this.setState({ passwordDirty: this.state.passwordDirty || !!value });
  }
  checkPassowrd(rule, value, callback) {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }
  checkConfirm(rule, value, callback) {
    const form = this.props.form;
    if (value && this.state.passwordDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
  myCallback(e) {
    console.log(e);
  }
  loaded() {
    console.log("loaded");
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        span: 14,
        offset: 6,
      },
    };
    return (
      <Form horizontal onSubmit={this.handleSubmit.bind(this)}>
        <FormItem
          {...formItemLayout}
          label={(
            <span>
              Username&nbsp;
              <Tooltip title="What do you want other to call you?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          )}
          hasFeedback
        >
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="Password"
          hasFeedback
        >
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: 'Please input your password!',
            }, {
              validator: this.checkConfirm.bind(this),
            }],
          })(
            <Input type="password" onBlur={this.handlePasswordBlur.bind(this)} />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="Confirm Password"
          hasFeedback
        >
          {getFieldDecorator('confirm', {
            rules: [{
              required: true, message: 'Please confirm your password!',
            }, {
              validator: this.checkPassowrd.bind(this),
            }],
          })(
            <Input type="password" />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="E-mail"
          hasFeedback
        >
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: 'The input is not valid E-mail!',
            }, {
              required: true, message: 'Please input your E-mail!',
            }],
          })(
            <Input />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="Habitual Residence"
        >
          {getFieldDecorator('residence', {
            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
            rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
          })(
            <Cascader options={residences} />
          )}
        </FormItem>

        <FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}>
          {getFieldDecorator('agreement', {
            valuePropName: 'checked',
            rules: [{ required: true, message: 'Please check the agreement!' }],
          })(
            <Checkbox>I had read the <a>agreement</a></Checkbox>
          )}
        </FormItem>
        <Recaptcha
          sitekey='mykeyxxxxxxxxxxxxxxxxmykey'
          onloadCallback={this.loaded.bind(this)}
          verifyCallback={this.myCallback.bind(this)}
        />
        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit" size="large">Register</Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(RegisterForm);

从“React”导入React；
导入“antd/dist/antd.css”；
从“antd/lib/Form”导入表单；
从“antd/lib/Input”导入输入；
从“antd/lib/Tooltip”导入工具提示；
从“antd/lib/Icon”导入图标；
从“antd/lib/Cascader”导入级联器；
从“antd/lib/Row”导入行；
从“antd/lib/Col”导入Col；
从“antd/lib/Checkbox”导入复选框；
从“antd/lib/Button”导入按钮；
从“react Recaptcha”导入Recaptcha；
const FormItem=表单项；
康斯特公寓=[{
价值:'浙江',，
标签:"浙江",，
儿童：[{
价值观：“杭州”，
标签:"杭州",，
儿童：[{
价值观：“西湖”，
标签：“西湖”，
}],
}],
}, {
价值:'江苏',，
标签:"江苏",，
儿童：[{
值：'南京'，
标签:"南京",，
儿童：[{
价值观：“中华门”，
标签:"中华门",，
}],
}],
}];
类RegisterForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
密码dirty:false，
};
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.form.validateFieldsAndScroll（（错误，值）=>{
如果（！err）{
log（'接收到的值的形式：'，值）；
}
});
}
handlePasswordBlur（e）{
常量值=e.target.value；
this.setState（{passwordDirty:this.state.passwordDirty | |！！value}）；
}
checkPassowrd（规则、值、回调）{
const form=this.props.form；
if（value&&value！==form.getFieldValue（'password'））{
回调（'输入的两个密码不一致！'）；
}否则{
回调（）；
}
}
检查确认（规则、值、回调）{
const form=this.props.form；
if（value&&this.state.passwordDirty）{
form.validateFields（['confirm']，{force:true}）；
}
回调（）；
}
myCallback（e）{
控制台日志（e）；
}
加载（）{
控制台日志（“已加载”）；
}
render（）{
const{getFieldDecorator}=this.props.form；
常量formItemLayout={
labelCol:{span:6}，
wrapperCol:{span:14}，
};
常量tailFormItemLayout={
包装纸：{
跨度：14，
抵销：6，
},
};
返回(
{getFieldDecorator（'用户名'{
规则：[{required:true，消息：'请输入您的用户名！'}]，
})(
)}
{getFieldDecorator（'密码'{
规则：[{
必填项：true，消息：“请输入密码！”，
}, {
验证器：this.checkConfirm.bind（this），
}],
})(
)}
{getFieldDecorator（'确认'{
规则：[{
必需：true，消息：“请确认您的密码！”，
}, {
验证器：this.checkPassowrd.bind（this），
}],
})(
)}
{getFieldDecorator（'电子邮件'{
规则：[{
键入：“电子邮件”，消息：“输入的电子邮件无效！”，
}, {
必填项：true，消息：“请输入您的电子邮件！”，
}],
})(
)}
{getFieldDecorator（'住宅'{
初始值：[“浙江”、“杭州”、“西湖”]，
规则：[{type:'array'，required:true，message:'请选择您的惯常居住地！']，
})(
)}
{getFieldDecorator（'协议'{
valuePropName:'已选中'，
规则：[{required:true，消息：“请检查协议！”}，
})(
我已经看过协议了
)}
登记
);
}
}
导出默认表单.create（）（RegisterForm）；

---

但在网页上，reCAPTCHA甚至无法显示。我认为

表单

组件有点神奇，我可能做了一些不正确的事情。

特别是有两件事需要注意：

全局声明

const RecaptchaItem=React.createClass（{..}）

，不要在

render（）中将其作为局部变量

必须同时提供

onloadCallback

和

verifyCallback

两个选项，如果缺少

onloadCallback

，reCAPTCHA将不会触发调用

verifyCallback

，并且表单无法获取值。这可能是TCHA的一个bug

以下是正确的代码：

const { Form, Icon, Input, Button, Checkbox } = antd;
const FormItem = Form.Item;

const RecaptchaItem = React.createClass({
  verifyCallback(result) {
    console.log('verifyCallback', result);
    this.props.onChange(result); // notify the form after verified
  },
  render() {
    return (<ReactRecaptcha
      render="explicit"
      sitekey="6LdSLAwUAAAAAFBwEUIlvzTxJE8zpRlh9r87eCL5"
      onloadCallback={() => {}}       
      verifyCallback={this.verifyCallback}
    />);
  }
});

const NormalLoginForm = Form.create()(React.createClass({
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  },
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input addonBefore={<Icon type="user" />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
        {getFieldDecorator('captcha', {
            rules: [{ required: true, message: 'Please input the captcha you got!' }],
          })(<RecaptchaItem />)}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className="login-form-forgot">Forgot password</a>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a>register now!</a>
        </FormItem>
      </Form>
    );
  },
}));

ReactDOM.render(<NormalLoginForm />,document.getElementById('container'));

const{Form，Icon，Input，Button，Checkbox}=antd；
const FormItem=表单项；
const RecaptchaItem=React.createClass({
验证回调（结果）{
log（'verifyCallback'，result）；
this.props.onChange（result）；//验证后通知表单
},
render（）{
返回（{}}
verifyCallback={this.verifyCallback}
/>);
}
});
常量NormalLoginForm=Form.create（）（React.createClass({
handleSubmit（e）{
e、 预防默认值（）；
this.props.form.validateFields（（错误，值）=>{
如果（！err）{
log（'接收到的值的形式：'，值）；
}
});
},
render（）{
const{getFieldDecorator}=this.props.form；
返回(
{getFieldDecorator（'用户名'{
规则：[{required:true，消息：'请输入您的用户名！'}]，
})(
)}
{getFieldDecorator（'密码'{
规则：[{required:true，消息：'请输入您的密码！'}]，
})(
)}
{getFieldDecorator（'captcha'{
规则：[{required:true，消息：“请输入您获得的验证码！”}，
})()}
{getFieldDecorator（'记住'{
valuePropName:'已选中'，
initialValue:true，
})(