ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项

ant design form表单动态增减表单项Form.List选中Select值后更新相关联Select选项。代码中地市联动获取区县数据:

html 复制代码
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off" form={form} initialValues={{ list: [{}] }} >
  <Form.List name="list">
    {(fields, { add, remove }) => (
      <>
        {fields.map(({ key, name, ...restField }, index) => (
          <Row
            key={key}
            gutter={8}
          >
            <Col span={3}>
              <Form.Item
                {...restField}
                name={[name, 'area']}
                rules={[
                  {
                    required: true,
                    message: '请选择地市',
                  },
                ]}
              >
                <Select
                  labelInValue
                  options={areaList}
                  placeholder="请选择地市"
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                noStyle={true}
                shouldUpdate={true} // 当 shouldUpdate 为 true 时,Form 的任意变化都会使该 Form.Item 重新渲染
              >
                {() => (
                  <Form.Item
                    {...restField}
                    name={[name, 'city']}
                    rules={[
                      {
                        required: true,
                        message: '请选择区县',
                      },
                    ]}
                  >
                    <Select
                      labelInValue
                      options={ // 这里是获取city数据的关键
                        cityObj?.[ // cityObj是某个地市下city数据的集合 数据类型是对象{地市ID:[]}
                        form.getFieldValue([
                          'list',
                          name,
                          'area'
                        ])?.value // 由于Select使用了labelInValue属性,所以这里取value即地市ID
                        ] || []
                      }
                      placeholder="请选择区县"
                    />
                  </Form.Item>
                )}
              </Form.Item>
            </Col>
            <Col span={1} style={{ textAlign: 'center' }}>
              <MinusCircleOutlined onClick={() => remove(name)} />
            </Col>
          </Row>
        ))}
        <Form.Item >
          <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
            新增
          </Button>
        </Form.Item>
      </>
    )}
  </Form.List>
  <Form.Item style={{ textAlign: 'center' }}>
    <Button type="primary" htmlType="submit">
      提交
    </Button>
  </Form.Item>
</Form>
相关推荐
爱奥尼欧41 分钟前
【LangChain】2.提示词工程
人工智能·microsoft·langchain
forestsea1 小时前
如何使用 Winget 下载 Claude Code 并实现绿色便携安装
windows·claudecode
每日新鲜事21 小时前
鲸蕾文化及进昂发布互动电影新作 《双生》亮相韩国富川电影节
microsoft
海天鹰1 天前
WIN10修改窗口标题栏失去焦点背景色
windows
llilay1 天前
企业级FastAPI后端模板搭建(六)加密用户密码
windows·fastapi
梦帮科技1 天前
GRAVIS v5.5:向硬核桌面端进化与云端多节点容灾部署实践
windows·架构·rust·自动化·区块链·智能合约·数字货币
tianyazhichiC1 天前
【VLC player 下载地址】
windows
小呀小叮当~1 天前
OpenAI Codex 桌面版(Windows / macOS)体验分享:AI 编程效率再次提升
人工智能·windows·macos
Starry-sky(jing)1 天前
Win11 装 ESP32 Arduino 库卡 3 小时?我把官方 3.3.10 全平台 522MB 搬到了蓝奏云,解压即用
运维·windows·esp32·arduino·离线安装
程序员老油条2 天前
WSL2 + Docker Desktop:Windows 下的完美 Java 开发环境
java·windows·docker·wsl2