11

https://github.com/ant-design/ant-design/blob/master/components/form/demo/horizo ​​ntal-login.md でantdフォームの例を再現しようとしています

React.createClass を extends React.Component に置き換えますが、Uncaught TypeError: Cannot read property 'getFieldDecorator' of undefined が発生します

次のコードを使用します。

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>
        )
    }
}

不足している Form.create 部分が問題の原因であるように見えますが、拡張メカニズムを使用してどこに収まるかわかりません。

どうすれば適切に行うことができますか？

4

3 に答える 3

2

フォーム クラスを親コンポーネントに含めたい場合は、最初にフォームを作成する必要があります。たとえば、親コンポーネントの render メソッドで:

    ...

    render() {
        ...

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

親クラスに Horizo​​ntalLoginForm クラスを必ずインポートしてください。

于 2016-12-16T14:14:25.903 に答える
2

公式の例を学習できます: https://ant.design/components/form/#components-form-demo-advanced-search

@vladimirp render で呼び出すForm.createのは良くありません。

于 2016-12-27T01:56:39.313 に答える