在 React 中使用 getFieldDecorator 嵌套 Antdesign 表单

Question

我有一个 Antdesign 表单，它有一个子组件，它使用两个输入组件、两个日期选择器和一个按钮显示对象数组的列表。

使用功能组件渲染使用嵌套的 AntD 组件时，甚至可能有 getFielDecorator 吗？如果是这样，我如何将 getFieldDecorator 传递给 AntD 嵌套的 FormItem？

请参阅我在此处附加的图片，该图片显示了父组件“OverallInfo”及其子项 TradeListItems，其中 TradeListItems 呈现 TradeItem 列表。

提前谢谢了。

Answer 1

Form.create()(MyComponent)将formprops注入MyComponent。

这是getFieldDecorator工作所需的唯一条件。

像这样的事情应该有效。

class Parent extends React.Component{

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

export default Form.create()(Parent);

子组件.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 个密码之前不会启用登录按钮。

希望这对你有帮助。