使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理，需要多层嵌套和处理默认事件和冒泡，具体实现过程直接上代码。
实现效果布局如下图
代码
javascript
<Form
name="basic"
form={form}
labelWrap
{...formItemLayoutSpan(5, 19)}
onFinish={onFinish}
autoComplete="off"
>
<Row gutter={gutterValue}>
<Col span={24}>
<Form.Item name="isConfirm" noStyle>
<Radio.Group>
<Space direction="vertical">
<Radio value={1}>
<Space wrap>
已定级备案，第
<span onClick={eventPrevent}>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
(prevValues as any)?.isConfirm !==
(currentValues as any)?.isConfirm
}
>
{({ getFieldValue }) => (
<FormItemSelect
className="level-select"
noStyle={true}
options={
confidentialLevelNumberDict as optionsDict[]
}
disabled={getFieldValue("isConfirm") === 2}
name={"1111"}
/>
)}
</Form.Item>
</span>
级（一至四），S
<span onClick={eventPrevent}>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
(prevValues as any)?.isKey !==
(currentValues as any)?.isKey
}
>
{({ getFieldValue }) => (
<FormItemSelect
className="level-select"
noStyle={true}
options={
confidentialLevelNumberDict as optionsDict[]
}
disabled={getFieldValue("isConfirm") === 2}
name={"112222"}
/>
)}
</Form.Item>
</span>
A
<span onClick={eventPrevent}>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
(prevValues as any)?.isKey !==
(currentValues as any)?.isKey
}
>
{({ getFieldValue }) => (
<FormItemSelect
className="level-select"
noStyle={true}
options={
confidentialLevelNumberDict as optionsDict[]
}
disabled={getFieldValue("isConfirm") === 2}
name={"11223333"}
/>
)}
</Form.Item>
</span>
G
<span onClick={eventPrevent}>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
(prevValues as any)?.isKey !==
(currentValues as any)?.isKey
}
>
{({ getFieldValue }) => (
<FormItemSelect
className="level-select"
noStyle={true}
options={
confidentialLevelNumberDict as optionsDict[]
}
disabled={getFieldValue("isConfirm") === 2}
name={"11255555"}
/>
)}
</Form.Item>
</span>
</Space>
<div className="mt-4">
<span onClick={eventPrevent}>
<Space>
备案证明编号：
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
(prevValues as any)?.isConfirm !==
(currentValues as any)?.isConfirm
}
>
{({ getFieldValue }) => (
<FormItemInput
noStyle={true}
disabled={getFieldValue("isConfirm") === 1}
name={"33666"}
/>
)}
</Form.Item>
</Space>
</span>
</div>
</Radio>
<Radio value={2}>
<Space wrap>
未定级，本次密评依据GB/T 39786---2021《信息安全技术
信息系统密码应用基本要求》第
<span
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
(prevValues as any)?.isConfirm !==
(currentValues as any)?.isConfirm
}
>
{({ getFieldValue }) => (
<FormItemSelect
noStyle={true}
className="level-select"
options={
confidentialLevelNumberDict as optionsDict[]
}
disabled={getFieldValue("isConfirm") === 1}
name={"77777"}
/>
)}
</Form.Item>
</span>
级（一至四）信息系统要求
</Space>
</Radio>
</Space>
</Radio.Group>
</Form.Item>
</Col>
</Row>
</Form>
javascript
const eventPrevent = (event: any) => {
event.preventDefault();
event.stopPropagation();
};
export { eventPrevent };
.level-select {
width: 84px !important;
}