Правильное создание формы antd с использованием механизма extends React.Component

Я пытаюсь воспроизвести пример формы antd в https://github.com/ant-design/ant-design/blob/master/components/form/demo/horizontal-login.md

Замена React.createClass расширяет React.Component, но я получаю 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', {
            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.

Как я могу правильно сделать это?

Источник

3 ответа

Решение

Если вы хотите включить свой класс формы в родительский компонент, вы должны сначала создать форму, например, в методе рендеринга родительских компонентов:

    ...

    render() {
        ...

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

Обязательно импортируйте ваш класс HorizontalLoginForm в родительский класс.

Источник

@vladimirimp на правильном пути, но есть 2 вопроса с выбранным ответом.

  1. Компоненты высшего порядка (такие как Form.create()) не должен вызываться в методе рендеринга.
  2. JSX требует определенных пользователем имен компонентов (таких как myHorizontalLoginForm) начинать с заглавных букв.

Чтобы это исправить, нам просто нужно изменить экспорт по умолчанию HorizontalLoginForm:

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

export default Form.create()(HorizontalLoginForm);

Тогда мы можем использовать HorizontalLoginForm непосредственно без необходимости устанавливать его в новую переменную. (но если бы вы установили новую переменную, вы бы хотели назвать эту переменную MyHorizontalLoginForm или что-нибудь еще, начинающееся с заглавной буквы).

Источник

Вы можете изучить официальный пример: https://ant.design/components/form/

@vladimirp это не хорошо, чтобы позвонить Form.create в рендере.

Источник
Другие вопросы по тегам