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。在这一行中，当我在getFieldDecorator函数中声明render时。

请告诉这些道具从何而来以及如何使用？我没有任何传递任何prop的父组件。帮助修复它。预先感谢。

Answer 1

请像这样导出组件

export default Form.create()(RegistrationForm)

Answer 2

我用这种方式

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

蚂蚁设计：getFieldDecorator（）

2 个答案: