Criando corretamente um form Antd Form usando o mecanismo de extensão React.Component - reactjs, antd

Eu estou tentando reproduzir o exemplo form e form em https://github.com/ant-design/ant-design/blob/master/components/form/demo/horizontal-login.md

Substituir React.createClass por estende React.Component, mas estou recebendo um TypeError não detectado: Não é possível ler a propriedade "getFieldDecorator" de undefined

com o seguinte código:

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", {
rules: [{ required: true, 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>
)
}
}

Parece que a parte Form.create ausente está causando o problema, mas não sabemos onde ela se encaixa usando o mecanismo de extensão.

Como posso fazer isso corretamente?

Respostas:

Quando você deseja incluir sua classe de formulário no componente pai, você deve primeiro criar o formulário, por exemplo, no método de processamento de componentes pai:

    ...

render() {
...

const myHorizontalLoginForm = Form.create()(HorizontalLoginForm);
...
return (
...
<myHorizontalLoginForm />
)
}

Certifique-se de importar sua classe HorizontalLoginForm na classe pai.

Você pode estudar um exemplo oficial: https://ant.design/components/form/#components-form-demo-advanced-search

@vladimirp não é bom ligar Form.create em renderizar.

@vladimirimp está no caminho certo, mas há 2 problemas com a resposta escolhida.

1. Componentes de ordem superior (como Form.create()) não deve ser chamado no método de renderização.
2. O JSX requer nomes de componentes definidos pelo usuário (como myHorizontalLoginForm) para começar com letras maiúsculas.

Para corrigir isso, precisamos apenas alterar nossa exportação padrão de HorizontalLoginForm:

class HorizontalLoginForm extends React.Component { /* ... */ }

export default Form.create()(HorizontalLoginForm);

Então podemos usar HorizontalLoginForm diretamente, sem a necessidade de configurá-lo para uma nova variável. (mas se você a definiu como uma nova variável, convém nomear essa variável MyHorizontalLoginForm ou qualquer outra coisa que comece com uma letra maiúscula).