具有可切换视图/编辑状态的动态React Antd表单

Question

我正在尝试创建具有可切换视图/编辑状态的 React Antd表单。 这意味着当我将重点放在（或单击）该项目时，它会向我显示给定的表单项（例如，输入），或者在其他情况下，我只会显示给定表单字段的字符串值。

我试图创建类似这样的东西：

<Form.Item label="Test input">
  {getFieldDecorator("name")(
    <>
      <Input />
      <span>Value of input</span>
    </>
  )}
</Form.Item>

我在Antd docs pages上找到了一个类似的示例，但是我需要创建带有大量输入的表单，在我看来，传递 Form.Item 和从上述示例中输入到 EditableCell 。

所以我想知道是否可以创建由以下代码组成的某种自定义组件：

<>
  <Input />
  <span>Value of input</span>
</>

您对如何正确，最佳地进行操作有任何想法吗？还是可以提供一些示例？