antd ProFormRadio.Group 嵌套使用方法

"@ant-design/pro-form": "^1.65.0",
"antd": "^4.20.2",

不知道是不是版本的问题,在 ProForm 中嵌套使用 Radio 时,直接用 Radio 的写法样式是没有问题,但是会出现选择后表单没有 name 值输出。

最后直接使用 options 选项来搞定,这里记录下写法

<ProFormRadio.Group
  name={"mobile_vendor"}
  label="手机厂家"
  options={[
    {
      value: 'huawei',
      label: '<ProFormRadio.Group
                width="md"
                name="mobile_product"
                label="手机型号"
                options={[
                  {
                    label: 'P70',
                    value: 1,
                  },
                  {
                    label: 'P60',
                    value: 2,
                  },
                ]}
              />',
    },
    {
      value: 'apple',
      label: '<ProFormRadio.Group
                width="md"
                name="mobile_product"
                label="手机型号"
                options={[
                  {
                    label: 'iPhone15ProMax',
                    value: 11,
                  },
                  {
                    label: 'iPhone15Pro',
                    value: 12,
                  },
                ]}
              />',
    },
  ]}
>
</ProFormRadio.Group>

出了嵌套 ProFormRadio 组件,还可以嵌套 ProFormSelect 组件。

顺便记录下,ProFormRadio 嵌套 ProFormSelect 时,在编辑状态会遇到无法使用 select 选择框的问题。相关 issue 见:https://github.com/ant-design/ant-design/issues/25959#issuecomment-671129621

使用一个 span 进行包裹,阻止默认事件即可

<span onClick={(e) => {
  e.preventDefault()
  e.stopPropagation()
}}>
// ProFormSelect 组件 ... 
</span>
Author: thinkwei

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注