select联动

实现两个下拉框的联动效果 第一个下拉框改变第二个下拉框会出现相应的变化

第一个下拉框

     {TypetArr.map((index, val) => (
           {index}
      ))}
 

第二个下拉框

showDrawer(`${type}`)} allowClear open={false}>
       
 

定义第一个下拉框内容

 const TypetArr = ['目标设备', '物类型', '分组']
 const [type, setTypes] = useState([]);

同步获取第二个下拉框内容

 const handleProvinceChange = (value: string | number) => {
      if (!!value) {
        setTypes([value]);
      } else {
        setTypes([]);
      }
    };

根据第二个下拉框不同的内容打开不同侧边弹框

 const showDrawer = (value: string) => {
      switch (value) {
        case '目标设备':
          setTargetvisible1(true)
          break;
        case '物类型':
          setTargetvisible2(true)
          break;
        case '分组':
          setTargetvisible3(true)
          break;
      }
    }

侧边弹框传入数据展示第二个下拉框内容

 const handleAfferent =(params:[])=>{
        setFieldsValue({ setTarget: `已选择${params?.length || 0}个${type}` })
      }

弹框子组件