在React中使用getFieldDecorator嵌套的Antdesign表单

Question

我有一个Antdesign表单，该表单具有一个子组件，该子组件使用两个Input组件，两个Date选择器和一个按钮来显示对象数组列表。

使用嵌套的AntD组件（通过功能组件进行渲染）时，是否甚至可能具有getFielDecorator？如果是这样，如何将getFieldDecorator传递给AntD嵌套的FormItem？

请参考我在此处所附的图片，其中显示了父组件“ OverallInfo”及其子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个密码之前，启用登录按钮。

希望这对您有所帮助。