Форма Dynamic React Antd с переключаемыми состояниями просмотра / редактирования

Question

Я пытаюсь создать React Antd форму с переключаемыми состояниями просмотра / редактирования .Это означает, что когда я фокусируюсь (или щелкаю) на элементе, он показывает мне данный элемент формы (например, «Ввод») или в других случаях показывает только строковое значение данного поля формы.

Я пыталсясоздайте что-то вроде этого:

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

Я нашел похожий пример на страницах документации Antd , но мне нужно создать формы с количеством входов, и мне кажется, что пройти немного сложнеевсе реквизиты для Form.Item и Input вплоть до EditableCell из упомянутого примера.

Так что мне было интересно, если это возможносоздайте какой-то пользовательский компонент, состоящий из этого кода:

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

У вас есть идеи о том, как сделать это правильно и оптимально?Или не могли бы вы привести несколько примеров?