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

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

Замена React.createClass на extends React.Component, но я получаю ошибку Uncaught TypeError: невозможно прочитать свойство getFieldDecorator из 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 вызывает проблему, но не знаю, где она подходит, используя механизм расширения.

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


reactjs antd
person Marcos Macedo    schedule 16.12.2016    source источник

Ответы (3)


arrow_upward
18
arrow_downward

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

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

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

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

export default Form.create()(HorizontalLoginForm);

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

person Luke    schedule 30.01.2018
comment
Я все еще получаю сообщение «форма свойства отсутствует в типе» почти так, как если бы компонент вообще не преобразовывался в форму. Есть предположения? - person MobileVet; 07.11.2018
comment
@MobileVet Вы используете TypeScript? Возможно, вам потребуется установить типы опор: class HorizontalLoginForm extends React.Component<{} & FormComponentProps> { /* ... */ }, где FormComponentProps импортируется как таковой: import {FormComponentProps} from "antd/lib/form". - person Joppe Geluykens; 24.01.2019

arrow_upward
2
arrow_downward

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

    ...

    render() {
        ...

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

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

person vladimirp    schedule 16.12.2016
comment
Не используйте HOC внутри метода рендеринга. Вызов HOC в рендере приведет к повторному подключению компонента при каждом рендеринге. Задокументировано здесь, а также ответили здесь. - person Luke; 30.01.2018

arrow_upward
2
arrow_downward

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

@vladimirp не следует вызывать Form.create в рендере.

person benjycui    schedule 27.12.2016