reactjs – 使用扩展的React.Component机制正确创建一个antd表单

用扩展React.Component替换React.createClass但是我得到一个Uncaught TypeError：无法读取未定义的属性’getFieldDecorator’

使用以下代码：

import { Form,Icon,Input,Button } from 'antd';
const FormItem = Form.Item;

export default class HorizontalLoginForm extends React.Component {
    constructor(props) {
        super(props);
    }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err,values) => {
      if (!err) {
        console.log('Received values of form: ',values);
      }
    });
  },render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form inline onSubmit={this.handleSubmit}>
        <FormItem>
          {getFieldDecorator('userName',{
            rules: [{ required: true,message: 'Please input your username!' }],})(
            <Input addonBefore={<Icon type="user" />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password',message: 'Please input your Password!' }],})(
            <Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit">Log in</Button>
        </FormItem>
      </Form>
        )
    }
}

看起来缺少Form.create部分导致问题,但不知道它使用扩展机制适合哪里.

我怎么能正确地做到这一点？