Ant 设计:getFieldDecorator()

Rah*_*yal 4 reactjs ant-design-pro

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>
);
  }
   }
Run Code Online (Sandbox Code Playgroud)

我正在使用ant design,但是当我运行这段代码时,它说this.props.form is undefined. 当我getFieldDecoratorrender函数中声明时,在这一行中。

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

Vu *_*Luu 5

请导出您的组件,例如

export default Form.create()(RegistrationForm)
Run Code Online (Sandbox Code Playgroud)