台州知名网站湖南网站设计外包服务

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

实现效果布局如下图

代码

<Formname="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.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isConfirm !==(currentValues as any)?.isConfirm}>{({ getFieldValue }) => (<FormItemSelectclassName="level-select"noStyle={true}options={confidentialLevelNumberDict as optionsDict[]}disabled={getFieldValue("isConfirm") === 2}name={"1111"}/>)}</Form.Item></span>级（一至四），S<span onClick={eventPrevent}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isKey !==(currentValues as any)?.isKey}>{({ getFieldValue }) => (<FormItemSelectclassName="level-select"noStyle={true}options={confidentialLevelNumberDict as optionsDict[]}disabled={getFieldValue("isConfirm") === 2}name={"112222"}/>)}</Form.Item></span>A<span onClick={eventPrevent}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isKey !==(currentValues as any)?.isKey}>{({ getFieldValue }) => (<FormItemSelectclassName="level-select"noStyle={true}options={confidentialLevelNumberDict as optionsDict[]}disabled={getFieldValue("isConfirm") === 2}name={"11223333"}/>)}</Form.Item></span>G<span onClick={eventPrevent}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isKey !==(currentValues as any)?.isKey}>{({ getFieldValue }) => (<FormItemSelectclassName="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.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isConfirm !==(currentValues as any)?.isConfirm}>{({ getFieldValue }) => (<FormItemInputnoStyle={true}disabled={getFieldValue("isConfirm") === 1}name={"33666"}/>)}</Form.Item></Space></span></div></Radio><Radio value={2}><Space wrap>未定级，本次密评依据GB/T 39786—2021《信息安全技术信息系统密码应用基本要求》第<spanonClick={(e) => {e.stopPropagation();e.preventDefault();}}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isConfirm !==(currentValues as any)?.isConfirm}>{({ getFieldValue }) => (<FormItemSelectnoStyle={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;
}