React+Antd实现省、市区级联下拉多选组件（支持只选省不选市）

 1、效果

是你要的效果，咱们继续往下看，搜索面板实现省市区下拉，原本有antd的Cascader组件，但是级联组件必须选到子节点，不能只选省，满足不了页面的需求

2、环境准备

1、react18

2、antd 4+

3、功能实现

原理：封装一个受控组件，该组件就是两select基本组件

1、首先，导入需要的组件：

import { Select, Space, Tag } from 'antd';

 2、定义2个状态变量来存储选中省和市的下拉枚举

  const [firstOptions, setFirstOptions] = useState<any>([]);
  const [secondOptions, setSecondOptions] = useState<any>([]);

 3、组件可接收的props子属性 如下：

•  options: 省市级联数据
•  value: 已选中的值
•  width：slect框的宽度
•  firstPlaceholder 第一个select框的placeholder
• secondPlaceholder第二个select框的placeholder
•  onChange： 选中的值发生变化时回调

 4、创建handleFirstChange函数来处理第一个select框的change事件，更新第二个select框的下拉项和值

  // 第一个select生变化
  const handleFirstChange = (data: any) => {
    if (!isEmpty(data) && data.value) {
      let insertIndex = (options || []).findIndex((item: any) => {
        return item?.value === data?.value;
      });
      setSecondOptions(options?.[insertIndex]?.childre