技术标签: react.js 前端框架 Antd 前端 React
是你要的效果,咱们继续往下看,搜索面板实现省市区下拉,原本有antd的Cascader组件,但是级联组件必须选到子节点,不能只选省,满足不了页面的需求
1、react18
2、antd 4+
原理:封装一个受控组件,该组件就是两select基本组件
1、首先,导入需要的组件:
import { Select, Space, Tag } from 'antd';
2、定义2个状态变量来存储选中省和市的下拉枚举
const [firstOptions, setFirstOptions] = useState<any>([]);
const [secondOptions, setSecondOptions] = useState<any>([]);
3、组件可接收的props子属性 如下:
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 (
<>
<Space wrap={false} direction="horizontal" size={12}>
<Select
defaultValue={firstOptions[0]}
style={
{ width: width }}
onChange={handleFirstChange}
placeholder={firstPlaceholder || '请选择'}
value={value?.first}
options={firstOptions}
labelInValue
allowClear
/>
<Select
style={
{ width: width }}
value={value?.second || []}
onChange={onSecondChange}
placeholder={secondPlaceholder || '请选择'}
options={secondOptions}
{...mode === "multiple" ? { mode: "multiple", maxTagCount: 'responsive', tagRender: tagRender } : {}}
labelInValue
allowClear
/>
</Space>
</>
)
7、完整代码如下:
import { Select, Space, Tag } from 'antd';
import clsx from 'clsx';
import { isEmpty, isNil } 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<any>([]);
const [secondOptions, setSecondOptions] = useState<any>();
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 (
<Tag
color={label.props?.color}
closable={closable}
onClose={onClose}
className={clsx([
'text-sky-400 bg-sky-400/10 text-sm font-normal leading-5',
// 'border border-solid border-sky-400/50',
'max-w-[110px] border-none',
// 'whitespace-nowrap text-ellipsis overflow-hidden'
])}
>
<span>{isLongTag ? `${label.slice(0, 4)}...` : label}</span>
{/* {isLongTag ? (
<Tooltip
title={label}
key={label}
rootClassName={clsx('toolTipCard')}
placement="top"
>
<span>{label.slice(0, 4)}...</span>
</Tooltip>
) : (
<span>{label}</span>
)} */}
</Tag>
);
};
return (
<>
<Space wrap={false} direction="horizontal" size={12}>
<Select
defaultValue={firstOptions[0]}
style={
{ width: width }}
onChange={handleFirstChange}
placeholder={firstPlaceholder || '请选择'}
value={value?.first}
options={firstOptions}
labelInValue
allowClear
/>
<Select
style={
{ width: width }}
value={value?.second || []}
onChange={onSecondChange}
placeholder={secondPlaceholder || '请选择'}
options={secondOptions}
{...mode === "multiple" ? { mode: "multiple", maxTagCount: 'responsive', tagRender: tagRender } : {}}
labelInValue
allowClear
/>
</Space>
</>
);
};
export default MultipleCascaderSelect;
组件调用
<MultipleCascaderSelect
width={162}
options={enumData|| []}
firstPlaceholder="请选择"
secondPlaceholder="请选择"
/>
文章浏览阅读7.1k次,点赞19次,收藏49次。JDK1.5之后,新增了自动拆、装箱功能,如以前创建一个Integer对象,需要 使用 “new”关键字;而现在Java中可以直接赋值如下:Integer不是new出Integer对象,而是直接赋值,就是自动装箱过程。Integer a = new Integer("100");//JDK1.5之后Integer b = 100;int x = b;再来测试如下代码:public class IntegerTest { public static void main._integer缓存范围
文章浏览阅读3.1k次。化工厂、电厂、煤矿等是生产安全重点单位,对人员定位管理需求强烈。这些企业对人员定位主要需求是:一般区域人数统计、人员轨迹、重点区域人员实时精准定位。针对这些工业企业的人员定位项目建设选取的技术方案通常有:基于蓝牙+LORA技术的定位方案基于UWB精准定位技术的定位方案3、基于RFID技术的区域定位方案但是这两种方案各有利弊。一、蓝牙+Lora技术方案分析蓝牙+Lora定位技术方案的核心设计思路是通过蓝牙作为位置信标点,人员卡片由蓝牙数据接收模块与lora通信模块构成,蓝牙数据接收模块接收发射_人员三种方案对比分析
文章浏览阅读2.6k次。一、 常用的坐标系1. Android View 坐标系2. opengl坐标系中采用的是3维坐标: static final float COORD[] = { -1.0f, -1.0f, //1 1.0f, -1.0f, //2 -1.0f, 1.0f, //3 1.0f, 1.0f, //4 };坐标原点默..._opengl 坐标后面有个f
文章浏览阅读10w+次,点赞26次,收藏79次。定时关机:Win+R 输入命令:①倒计时关机: shutdown -s -t 3600:在一小时后关机 ②取消关机命令:shutdown -a_定时关机命令
文章浏览阅读5.2k次,点赞17次,收藏46次。什么是shader?unity当中的shader是什么?_unity shader
文章浏览阅读710次,点赞8次,收藏4次。企业在选择AWS服务前,首先需要明确自身的业务特点和IT需求,包括计算资源、存储空间、网络带宽等。企业需要了解AWS提供的安全机制,如数据加密、访问控制、安全组等,并确保它们满足自身的安全合规要求。可靠的服务质量是企业选择云计算服务的重中之重。企业需要了解AWS的服务等级协议(SLA),包括可用性承诺、响应时间等指标,并评估是否符合自身的业务需求。总之,选购AWS服务需要全方位地考虑企业的业务需求、成本预算、安全合规、服务可靠性以及迁移成本等因素,只有做好这些充分的评估,企业才能选择最佳的AWS解决方案。
文章浏览阅读1k次。实现功能:创建队列的脚本,在81人行端执行#!/bin/bash#创建队列的脚本,在81人行端执行./etc/profile.~/.bashrc#运行前按需修改:队列管理器名称、机构代码、机构名称、IP!!!# 本机MQ队列管理器名称生产:QM_FTZMIS_0900_01测试:QM_FTZMIS_TEST_0900_01QMNAME=QM_FTZMIS_10000_01# 金融机构12位编码JGBM=99999# 金融机构名称JGMC=BeiJi..._shell脚本编写,创建topic
文章浏览阅读115次。简单的连接数据库类1.[文件] DBHelper.java~3KB 下载(28)package sns.team6.util;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sq..._java程序与mysql
文章浏览阅读5.1k次。unity3d中的物体,在Scene窗口中可以看到,而在Game窗口中看不到的原因:多半是因为物体所属Layer与照相机的culling mask不一致导致的,或者超出照相机的可视范围。如果游戏中有多个相机,每个相机都有自己的可视范围和culling mask,物体在移动的过程中,进入不同的相机,其可见性可能是变化的,取决与物体所属Layer与当前相机是否一致 转载..._物体所属layer与照相机的culling mask不一致导致的,或者超出照相机的可视范围
文章浏览阅读1k次,点赞21次,收藏20次。他们降低了基础层的对比度,同时保留了细节层。前三种方法不能很好地保留明亮区域的细节,但我们的方法不仅保留了大量的视觉内容,而且显示出良好的整体外观,这比其他方法有竞争力或更好。尽管可以从不同曝光的照片中获得包含真实场景的全动态范围的高动态范围(HDR)图像[3],但诸如普通监视器之类的低动态范围(LDR)显示设备不能处理场景的全动力学范围。引导滤波器的半径r和正则化参数ε的值与减少光晕伪影和保持局部对比度保持平衡,非线性控制参数λ的值确保了对场景内容的适当考虑,对比度控制参数η的值提供了适当的整体对比度。_hsv hdr
文章浏览阅读1.4k次。给出一个由O和X组成的串(长度为1~80),统计得分。每个O的分数为目前连续出现的O的个数,X的得分为0。例如,OOXXOXXOOO的得分为1+2+0+0+1+0+0+1+2+3。 分析:此题很简单,两个变量一个用于记录当前O的分数,另外一个变量用来累加分数。#define MAX 100#include #includeint main()_给出一个由o和x组成的串,统计得分
文章浏览阅读1.8w次,点赞14次,收藏27次。因业务需要部署分布式存储,新分配了三台RHE机器,在部署安装MFS时,make阶段出现以下错误提示:错误提示:CDPATH="${ZSH_VERSION+.}:" && cd . && /bin/sh /home/agssvYX/moosefs-3.0/moosefs-3.0/missing aclocal-1.15 -I m4/home/agssvYX/moo..._aclocal-1.15 is missing