Пользовательские элементы управления формы проектирования Ant не могут отображаться правильно

#reactjs #typescript #antd

Вопрос:

введите описание изображения здесь

Требования: я хочу, чтобы элемент управления, подобный изображению на картинке, включал checkBoxGroup для выбора типа фруктов, и каждый элемент проверки включал элемент управления inputNumber для ввода количества, необходимого для фруктов.

Я пытаюсь настроить элемент управления формой с именем CheckGroup. Согласно официальному документу, я определяю два интерфейса: value и onChange.

Когда я помещаю CheckGroup в Form.Item, я получаю сообщение об ошибке: TypeError: не удается прочитать свойства undefined (чтение ‘map’). Когда я печатаю значение в CheckGroup , оно также показывает undefined , но когда я помещаю CheckGroup вне Form.Item, оно может отображаться нормально, и значение также может быть успешно передано.

Итак, как я могу это решить? Я не понимаю, в чем проблема.

Спасибо!

Репозиторий

Ответ №1:

реквизит value передается Form.Item из Form компонента и заменяет указанное вами значение
Для правильной передачи значения необходимо указать реквизит initialValues в Form

 <Form
  layout="vertical"
  initialValues={{
    googds: groupData
  }}
>
  {/**...**/}
  <Form.Item
    name="googds"
    label="Goods"
    rules={[{ required: true, message: "Please Input Sex" }]}
  >
    {/****************  use like this *********************/}
    <CheckGroup />
  </Form.Item>
</Form>