Ant design Form自定义控件无法正确显示

Question

需求：我想要一个如图所示的控件，checkBoxGroup为select水果类型，每个checkItem都包含一个InputNumber控件，用于输入水果所需的数量。

我尝试自定义一个名为 CheckGroup 的表单控件。按照官方文档，我定义了两个接口，value和onChange。

当我将 CheckGroup 放入 Form.Item 时，出现错误：TypeError：无法读取未定义的属性（读取'map'）。当我打印CheckGroup中的值时，它也显示undefined，但是当我将CheckGroup放在Form.Item之外时，它可以正常显示，并且值也可以传递成功。

那我该如何解决呢？我不清楚问题出在哪里。

谢谢！

Repo

Answer 1

props value 从 Form 组件传递到 Form.Item 并替换您指定的值
要正确传递值，您必须指定道具 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>

Ant design Form自定义控件无法正确显示

Ant design Form custom controls cannot be displayed correctly

typescript

reactjs

antd