Ant Design FormコンポーネントでGoogle reCAPTCHAを使用するにはどうすればよいですか？

Question

私は、次の、antdでreact-recaptchaを使用しようとしているが、私のソースコードです：

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

しかし、Webページで、reCAPTCHAのにも表示することはできません。私はFormのコンポーネントは少し魔法だと思うし、おそらく正しいものではないかもしれない。

Answer 1

特に二つのことは、注意が必要な場合があります。

1. はonloadCallbackが欠落している場合、それはrender()
2. 内のローカル変数は、onloadCallbackとverifyCallbackの両方を提供しなければならないことはありません、reCAPTCHAのではないだろう、グローバルconst RecaptchaItem = React.createClass({..})を宣言トリガー呼び出しverifyCallbackとフォームが値を取得できません。これはおそらく、ここで反応し、reCAPTCHAの

のバグが正しいコードです：

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

は、最も貴重な情報が興味を持っている場合、誰かに、この答えに既にあるthe live demo here

を参照してください。しかし、Github発行の元のディスカッションリンクは次のとおりです。https://github.com/ant-design/ant-design/issues/3878