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([]);
  const [secondOptions, setSecondOptions] = useState([]);

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]?.children || []);
      onChange({ first: [data] });
    } else {
      setSecondOptions([]);
      onChange(null);
    }
  };

5、创建onSecondChange函数来处理第二个select框的change事件，将选中的值回传给父组件

  // 第二个select发生变化
  const onSecondChange = (data: any) => {
    if (!isEmpty(value) && value.first) {
 服务器托管网     if (!isEmpty(data)) {
        onChange({
          ...value,
          second: mode === 'multiple' ? (data || []).filter((item: any) => !isNil(item?.label)) : [data],
        });
      } else {
        onChange({ first: value.first, second: null });
      }
    } else {
      onChange(null);
    }
  };

6、最后，使用2个select组件渲染，并将选中状态和change事件绑定到对应的属性上：

return (
    
      
        { width: width }}
          onChange={handleFirstChange}
          placeholder={firstPlaceholder || '请选择'}
          value={value?.first}
          options={firstOptions}
          labelInValue
          allowClear
        />
        { width: width }}
          value={value?.second || []}
          onChange={onSecondChange}
          placeholder={secondPlaceholder || '请选择'}
          options={secondOptions}
          {...mode === "multiple" ? { mode: "multiple", maxTagCount: 'responsive', tagRender: tagRender } : {}}
          labelInValue
          allowClear
        />
      
    >
)

7、完整代码如下：

import { Select, Space, Tag } from 'antd';
import clsx from 'clsx';
import { isEmpty, i服务器托管网sNil } from 'lodash';
import { useEffect, useState } from 'react';
import './index.less';

const MultipleCascaderSelect = (props: any) => {
  const {
    options,
    value,
    onChange,
    width = 160,
    firstPlaceholder,
    secondPlaceholder,
    mode = 'multiple'
  } = props;

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

  useEffect(() => {
    setFirstOptions(options || []);
    if (Array.isArray(value?.first) && value.first.length) {
      let findIndex = (options || []).findIndex((item: any) => {
        return item.value === value.first?.[0].value;
      });
      setSecondOptions(options[findIndex]?.children || []);
    } else {
      setSecondOptions([]);
    }
  }, [options, value]);

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

  // 第二个select发生变化
  const onSecondChange = (data: any) => {
    if (!isEmpty(value) && value.first) {
      if (!isEmpty(data)) {
        onChange({
          ...value,
          second: mode === 'multiple' ? (data || []).filter((item: any) => !isNil(item?.label)) : [data],
        });
      } else {
        onChange({ first: value.first, second: null });
      }
    } else {
      onChange(null);
    }
  };
  const tagRender = ({ label, closable, onClose }: any) => {
    const isLongTag = `${label}`.length > 4;
    return (
      
        {isLongTag ? `${label.slice(0, 4)}...` : label}
        {/* {isLongTag ? (
          
            {label.slice(0, 4)}...
          
        ) : (
          {label}
        )} */}
      
    );
  };
  return (
    
      
        { width: width }}
          onChange={handleFirstChange}
          placeholder={firstPlaceholder || '请选择'}
          value={value?.first}
          options={firstOptions}
          labelInValue
          allowClear
        />
        { width: width }}
          value={value?.second || []}
          onChange={onSecondChange}
          placeholder={secondPlaceholder || '请选择'}
          options={secondOptions}
          {...mode === "multiple" ? { mode: "multiple", maxTagCount: 'responsive', tagRender: tagRender } : {}}
          labelInValue
          allowClear
        />
      
    >
  );
};

export default MultipleCascaderSelect;

组件调用

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 语义分割 | 基于 VGG16 预训练网络和 Segnet 架构实现迁移学习

Hi，大家好，我是源于花海。本文主要使用数据标注工具 Labelme 对猫（cat）和狗（dog）这两种训练样本进行标注，使用预训练模型 VGG16 作为卷积基，并在其之上添加了全连接层。基于标注样本的信息和预训练模型的特征提取能力以及 Segnet 架构，训…