Вложенные формы Antdesign с getFieldDecorator в React

Question

У меня есть форма Antdesign, которая имеет подкомпонент, который отображает списки массива объектов с использованием двух компонентов ввода, двух сборщиков даты и кнопки.

IsМожно ли даже получить getFielDecorator при использовании вложенных компонентов AntD рендеринга с использованием функционального компонента?Если да, то как я могу передать getFieldDecorator в вложенный FormItem AntD?

Пожалуйста, обратитесь к приложенной мной картинке, на которой показан родительский компонент "InfoInfo "и его дочерние элементы TradeListItems, в которых TradeListItems отображает список TradeItem.

Большое спасибо заранее.

Answer 1

Form.create()(MyComponent) будет вводить form реквизиты в MyComponent.

, единственное, что необходимо для работы getFieldDecorator.

Что-то подобное должно работать.

class Parent extends React.Component{

  render() {
   <ChildComponent form={this.props.form} />
  }
}

export default Form.create()(Parent);

ChildComponent.jsx

export default class ChildComponent extends React.Component{

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      // do FormItem
    )
  }
}

Не имеет значения, сколько детей, но вы не должны иметь <Form/> внутри другого <Form/>

ОБНОВЛЕНИЕ:

Я создал пример, основанный на примере формы входа в систему из antd doc.

https://codesandbox.io/s/kmyl0wq4m3

вы увидите, что я создал поле пароля как функциональный компонент, аналогичный вашему TradeItem компонент.тогда у меня есть еще один ListTradeItem компонент, подобный вашему, где я просто дублировал несколько полей пароля, вы можете подумать, что это форма входа в систему, где вам нужно ввести 3 пароля для входа в систему.

Вы увидите все 3Поля паролей работают нормально и независимо, getFieldDecorator также работает нормально, как и ожидалось (кнопка входа не будет активна, пока вы не введете 3 пароля.

надеюсь, что это поможет вам.