"@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>