web-dev-qa-db-fra.com

Créer correctement un formulaire antd en utilisant le mécanisme étendu React.Component

J'essaie de reproduire l'exemple antd Form dans https://github.com/ant-design/ant-design/blob/master/components/form/demo/horizontal-login.md

Remplacement de React.createClass par une extension avec React.Component mais j'obtiens un TypeError non capturé: impossible de lire la propriété 'getFieldDecorator' de non définie

avec le code suivant:

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

On dirait que la partie manquante de Form.create est à l'origine du problème, mais je ne sais pas où elle va à l'aide du mécanisme extend.

Comment puis-je le faire correctement?

reactjsantd
7
Marcos Macedo

@vladimirimp est sur la bonne voie, mais la réponse choisie pose deux problèmes.

  1. Les composants d'ordre supérieur (tels que Form.create()) ne doivent pas être appelés dans la méthode de rendu.
  2. JSX requiert des noms de composants définis par l'utilisateur (tels que myHorizontalLoginForm) pour commencer par des lettres majuscules.

Pour résoudre ce problème, il nous suffit de modifier notre exportation par défaut de HorizontalLoginForm:

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

export default Form.create()(HorizontalLoginForm);

Ensuite, nous pouvons utiliser HorizontalLoginForm directement sans avoir à définir une nouvelle variable. (mais si vous l'avez défini sur une nouvelle variable, vous voudrez nommer cette variable MyHorizontalLoginForm ou toute autre chose commençant par une majuscule).

6
Luke M Willis

Vous pouvez étudier l'exemple officiel: https://ant.design/components/form/#components-form-demo-advanced-search

@vladimirp il n'est pas bon d'appeler Form.create dans le rendu.

2
benjycui

Lorsque vous souhaitez inclure votre classe de formulaire dans le composant parent, vous devez d'abord créer un formulaire, par exemple dans les composants parents, la méthode de rendu:

    ...

    render() {
        ...

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

Veillez à importer votre classe HorizontalLoginForm dans la classe parente.

2
vladimirp