web-dev-qa-db-ja.com

extends React.Componentメカニズムを使用してantdフォームを正しく作成する

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

React.createClassをReact.Componentのextendsに置き換えるが、Uncaught TypeErrorが発生します：undefinedのプロパティ '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>
        )
    }
}

不足しているForm.createパーツが問題を引き起こしているように見えますが、extendsメカニズムを使用してどこに適合するのかわかりません。

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

reactjsantd
11
Marcos Macedo

@vladimirimpは正しい軌道に乗っていますが、選択した答えには2つの問題があります。

  1. 高次コンポーネント（Form.create()など）をrenderメソッドで呼び出さないでください。
  2. JSXでは、大文字で始まるユーザー定義のコンポーネント名（myHorizontalLoginFormなど）が必要です。

これを修正するには、デフォルトのHorizontalLoginFormのエクスポートを変更するだけです。

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

export default Form.create()(HorizontalLoginForm);

次に、HorizontalLoginFormを直接使用して、新しい変数に設定する必要がありません。 （ただし、新しい変数に設定した場合は、その変数にMyHorizontalLoginFormまたは大文字で始まるその他の名前を付けます）。

13
Luke

公式の例を学ぶことができます： https://ant.design/components/form/#components-form-demo-advanced-search

@vladimirpレンダリングでForm.createを呼び出すのは良くありません。

2
benjycui

フォームクラスを親コンポーネントに含める場合、まず親コンポーネントのrenderメソッドなどでフォームを作成する必要があります。

    ...

    render() {
        ...

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

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

2
vladimirp