Reactjs 使用extends React.Component机制正确创建antd表单

我试图在中重现antd表单示例

将React.createClass替换为扩展React.Component，但我得到一个未捕获的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', {
            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>
        )
    }
}

从“antd”导入{表单、图标、输入、按钮}；
const FormItem=表单项；
导出默认类HorizontalLoginForm扩展React.Component{
建造师（道具）{
超级（道具）；
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.form.validateFields（（错误，值）=>{
如果（！err）{
log（'接收到的值的形式：'，值）；
}
});
},
render（）{
const{getFieldDecorator}=this.props.form；
返回(
{getFieldDecorator（'用户名'{
规则：[{required:true，消息：'请输入您的用户名！'}]，
})(
)}
{getFieldDecorator（'密码'{
规则：[{required:true，消息：'请输入您的密码！'}]，
})(
)}
登录
)
}
}

看起来是缺少Form.create部件导致了问题，但不知道使用extends机制将其安装在何处

---

如何正确执行此操作？

当您希望在父组件中包含表单类时，必须首先创建表单，例如在父组件渲染方法中：

    ...

    render() {
        ...

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

。。。
render（）{
...
常量myHorizontalLoginForm=Form.create（）（HorizontalLoginForm）；
...
返回(
...
)
}

---

请确保在父类中导入HorizontalLoginForm类。

您可以学习官方示例：

---

@vladimirp调用

表单不好。在渲染中创建
。
@vladimirimp走上了正确的道路，但所选答案有两个问题

更高阶的组件（如
Form.create（）
）不应在render方法中调用
JSX要求用户定义的组件名称（如
myHorizontalLoginForm
）以大写字母开头
要解决此问题，我们只需更改
HorizontalLoginForm
的默认导出：

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

export default Form.create()(HorizontalLoginForm);

然后，我们可以直接使用
HorizontalLoginForm
，而无需将其设置为新变量。（但如果您确实将其设置为新变量，则需要将该变量命名为
MyHorizontalLoginForm
或以大写字母开头的任何其他变量）。
不要在渲染方法中使用HOCs。在呈现中调用HOC将导致组件在每个呈现上重新装载。而且，我仍然会得到一个“类型中缺少属性表单”几乎就像组件根本没有解析为表单一样。有什么想法吗？@MobileVet你在用打字脚本吗？您可能需要设置属性类型：
class HorizontalLoginForm extends React.Component{/*…*/}
其中导入
FormComponentProps
：从“antd/lib/form”导入{FormComponentProps}。