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

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

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

最近更新

  1. TCP协议是安全的吗?

    2024-06-08 14:16:10       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-08 14:16:10       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-08 14:16:10       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-08 14:16:10       20 阅读

热门阅读

  1. 多方合作的工作经验

    2024-06-08 14:16:10       6 阅读
  2. Oracle数据库面试题-9

    2024-06-08 14:16:10       10 阅读
  3. 机器学习之数学基础 时间复杂度和空间复杂度

    2024-06-08 14:16:10       10 阅读
  4. Linux top命令详解

    2024-06-08 14:16:10       7 阅读
  5. Scratch编程从入门到精通:探索编程的奇幻世界

    2024-06-08 14:16:10       10 阅读
  6. c++ new 和 malloc 分配内存

    2024-06-08 14:16:10       13 阅读
  7. SREC用什么软件编程:全面解析与编程工具选择

    2024-06-08 14:16:10       12 阅读
  8. Redis基础:在现代架构中使用Redis的优势与挑战

    2024-06-08 14:16:10       8 阅读
  9. 【React】Lodash

    2024-06-08 14:16:10       9 阅读
  10. 【C#】C#读写Excel文件

    2024-06-08 14:16:10       9 阅读
  11. mysql centos xtrabackup

    2024-06-08 14:16:10       7 阅读