蚂蚁设计：getFieldDecorator()

Question

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 的任何父组件。帮助修复它。提前致谢。

Answer 1

您应该像这样导出 class：

export default Form.create()(RegistrationForm)

表单对象将通过这种方式注入到道具中。

Answer 2

请像

一样导出您的组件

export default Form.create()(RegistrationForm)

Answer 3

我是这样用的

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

蚂蚁设计：getFieldDecorator()

Ant Design : getFieldDecorator()

reactjs

ant-design-pro