泉州网站建设方案外包,苏州排名搜索优化,qq网页版在线登录,如何在国际上做网站1、效果
是你要的效果#xff0c;咱们继续往下看#xff0c;搜索面板实现省市区下拉#xff0c;原本有antd的Cascader组件#xff0c;但是级联组件必须选到子节点#xff0c;不能只选省#xff0c;满足不了页面的需求 2、环境准备
1、react18
2、antd 4
3、功能实现 … 1、效果
是你要的效果咱们继续往下看搜索面板实现省市区下拉原本有antd的Cascader组件但是级联组件必须选到子节点不能只选省满足不了页面的需求 2、环境准备
1、react18
2、antd 4
3、功能实现
原理封装一个受控组件该组件就是两select基本组件
1、首先导入需要的组件
import { Select, Space, Tag } from antd; 2、定义2个状态变量来存储选中省和市的下拉枚举 const [firstOptions, setFirstOptions] useStateany([]);const [secondOptions, setSecondOptions] useStateany([]); 3、组件可接收的props子属性 如下 options: 省市级联数据 value: 已选中的值 widthslect框的宽度 firstPlaceholder 第一个select框的placeholdersecondPlaceholder第二个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 (Space wrap{false} directionhorizontal size{12}SelectdefaultValue{firstOptions[0]}style{{ width: width }}onChange{handleFirstChange}placeholder{firstPlaceholder || 请选择}value{value?.first}options{firstOptions}labelInValueallowClear/Selectstyle{{ width: width }}value{value?.second || []}onChange{onSecondChange}placeholder{secondPlaceholder || 请选择}options{secondOptions}{...mode multiple ? { mode: multiple, maxTagCount: responsive, tagRender: tagRender } : {}}labelInValueallowClear//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] useStateany([]);const [secondOptions, setSecondOptions] useStateany();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 (Tagcolor{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 ? (Tooltiptitle{label}key{label}rootClassName{clsx(toolTipCard)}placementtopspan{label.slice(0, 4)}.../span/Tooltip) : (span{label}/span)} */}/Tag);};return (Space wrap{false} directionhorizontal size{12}SelectdefaultValue{firstOptions[0]}style{{ width: width }}onChange{handleFirstChange}placeholder{firstPlaceholder || 请选择}value{value?.first}options{firstOptions}labelInValueallowClear/Selectstyle{{ width: width }}value{value?.second || []}onChange{onSecondChange}placeholder{secondPlaceholder || 请选择}options{secondOptions}{...mode multiple ? { mode: multiple, maxTagCount: responsive, tagRender: tagRender } : {}}labelInValueallowClear//Space/);
};export default MultipleCascaderSelect;组件调用 MultipleCascaderSelectwidth{162}options{enumData|| []}firstPlaceholder请选择secondPlaceholder请选择/
