Ant 设计：getFieldDecorator()答案

【问题标题】：Ant Design : getFieldDecorator()Ant 设计：getFieldDecorator()
【发布时间】：2019-08-02 01:44:00
【问题描述】：

import {
 Form, Input, Tooltip, Icon
} from 'antd';
 import React , {Component }from 'react';
import ReactDOM from 'react-dom';

export default class RegistrationForm extends Component {
     state = {
     confirmDirty: false,
     autoCompleteResult: [],
     };

     handleSubmit = (e) => {
         e.preventDefault();
         this.props.form.validateFieldsAndScroll((err, values) => {
         if (!err) {
            console.log('Received values of form: ', values);
          }
       });
       }

     handleConfirmBlur = (e) => {
         const value = e.target.value;
         this.setState({ confirmDirty: this.state.confirmDirty || !!value                
         });
         }

        render() {
           console.log(this.props.form)
             const { getFieldDecorator } = this.props.form;

             const formItemLayout = {
             labelCol: {
                   xs: { span: 24 },
                   sm: { span: 8 },
                 },
              wrapperCol: {
                  xs: { span: 24 },
                  sm: { span: 16 },
              },
             };

return (
  <Form {...formItemLayout} onSubmit={this.handleSubmit}>
    <Form.Item
      label="E-mail"
      >
      {getFieldDecorator('email', {
        rules: [{
          type: 'email', message: 'The input is not valid E-mail!',
        }, {
          required: true, message: 'Please input your E-mail!',
        }],
      })(
        <Input />
        )}
    </Form.Item>

    <Form.Item
      label={(
        <span>
          Nickname&nbsp;
          <Tooltip title="What do you want others to call you?">
            <Icon type="question-circle-o" />
          </Tooltip>
        </span>
      )}
      >
      {getFieldDecorator('nickname', {
        rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
      })(
        <Input />
        )}
    </Form.Item>
  </Form>
);
  }
   }

我正在使用ant design，但是当我运行此代码时，它显示this.props.form is undefined。在这一行中，当我在 render 函数中声明 getFieldDecorator 时。

请问这些道具是从哪里来的以及如何使用呢？我没有任何传递任何prop 的父组件。帮助修复它。提前致谢。

【问题讨论】：

标签： reactjs ant-design-pro

【解决方案1】：

请像这样导出您的组件

export default Form.create()(RegistrationForm)

【讨论】：

【解决方案2】：

你应该像这样导出一个类：

export default Form.create()(RegistrationForm)

form 对象会通过这种方式注入到 props 中。

【讨论】：

【解决方案3】：

我是这样用的

const WerappedRegistration = Form.create({ name: 'registrationform' })(RegistrationForm);
export default WerappedRegistration;

【讨论】：