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

最新推荐文章于 2025-04-05 10:42:43 发布

Sun_小杰杰哇

最新推荐文章于 2025-04-05 10:42:43 发布

阅读量736

点赞数 2

分类专栏：前端 # React # JavaScript 文章标签： react.js javascript 前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_41271930/article/details/145322483

版权

使用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={g