react-antd form表单的使用（验证）

1.引入import { Layout, ConfigProvider, Button, Input, Modal, Form, Table,Pagination } from 'antd';对应的组件

<Form layout="vertical" onSubmit={this.handleSubmit}>
            <Form.Item label="E-mail">
              {getFieldDecorator('email', {
                initialValue:"",
                rules: [
                  {
                    type: 'email',
                    message: '请输入正确邮箱',
                    // pattern: /^[0-9]+$/,
                  },
                  {
                    required: true,
                    message: '输入邮箱',
                  },
                ],
              })(<Input  />)}
            </Form.Item>
            <Form.Item label="name">
              {getFieldDecorator('name', {//验证具体看官网api
                 initialValue:"",
                rules: [
                  {
                    message: '姓名不能为空',
                  },
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })(<Input />)}
            </Form.Item>
          </Form>

Form.Item是每一行表单元素。按照官网上的写会报一个错误getFieldDecorator is function或者直接连页面都无法显示了。官网上是这么写的

 const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;

官网上是在render里写上这两句，我复制过来还是报错，打印this.props.form直接就是undefined.找了很久随后才了解到必须要加Form.create()才会有这个属性

加上之后就好可以导出的时候直接这样些就好了export default  (Form.create()(EmailList));