我试图在
https://github.com/ant-design/ant-design/blob/master/components/form/demo/horizontal-login.md中重现antd Form示例
用扩展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部分导致问题,但不知道它使用扩展机制适合哪里.
我怎么能正确地做到这一点?
@vladimirimp走在正确的轨道上,但所选答案有2个问题.
>不应在render方法中调用高阶组件(如Form.create()).
> JSX要求用户定义的组件名称(例如myHorizontalLoginForm)以大写字母开头.
要解决这个问题,我们只需要更改HorizontalLoginForm的默认导出:
- class HorizontalLoginForm extends React.Component { /* ... */ }
- export default Form.create()(HorizontalLoginForm);
然后我们可以直接使用HorizontalLoginForm而无需将其设置为新变量. (但如果您确实将其设置为新变量,则需要将该变量命名为MyHorizontalLoginForm或以大写字母开头的任何其他内容).