Antd React Form使用Radio嵌套多个Select和Input的处理

使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理，需要多层嵌套和处理默认事件和冒泡，具体实现过程直接上代码。

实现效果布局如下图

代码

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

const eventPrevent = (event: any) => {
  event.preventDefault();
  event.stopPropagation();
};

export { eventPrevent };


.level-select {
   width: 84px !important;
}