antd级联同级多选

### 实现 Ant Design Cascader 同级多选 为了实现在 Ant Design 的 `Cascader` 组件中支持同级多选功能，可以通过自定义 `onChange` 和 `onPopupVisibleChange` 方法来处理选择逻辑。由于默认情况下 `Cascader` 不支持同级多选，因此需要通过一些额外的编程技巧来实现这一特性。 #### 自定义数据结构和状态管理 首先，在组件的状态中维护一个数组用于存储已选择项： ```javascript import React, { useState } from 'react'; import { Cascader } from 'antd'; const options = [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', label: 'Hangzhou' }, { value: 'ningbo', label: 'Ningbo' } ] }, { value: 'jiangsu', label: 'Jiangsu', children: [ { value: 'nanjing', label: 'Nanjing' }, { value: 'suzhou', label: 'Suzhou' } ] } ]; function App() { const [selectedItems, setSelectedItems] = useState([]); function handleChange(value, selectedOptions) { let newSelectedItems = [...selectedItems]; // Remove any previously selected items at the same level as current selection newSelectedItems = newSelectedItems.filter(item => !isSameLevel(selectedOptions[item], selectedOptions)); // Add newly selected item to state newSelectedItems.push(...value); setSelectedItems(newSelectedItems); console.log('changed:', value, selectedOptions); } function isSameLevel(optionA, optionB) { while (optionA && optionB) { if (!optionA.parent || !optionB.parent) break; if (optionA.parent.value === optionB.parent.value) return true; optionA = optionA.parent; optionB = optionB.parent; } return false; } return ( <Cascader options={options} onChange={handleChange} changeOnSelect popupClassName="custom-cascader" showSearch={{ filter: (inputValue, path) => path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1), }} /> ); } export default App; ``` 此代码片段展示了如何创建一个多选级别的 `Cascader` 组件[^1]。注意这里的关键在于 `handleChange` 函数中的逻辑，它负责移除同一级别已经存在的选项并添加新的选择到状态列表里。 另外需要注意的是，当用户点击展开下拉菜单时，可能还需要重置某些内部状态以确保用户体验的一致性和正确性。这通常涉及到监听弹窗可见性的变化事件 (`onPopupVisibleChange`) 并据此调整应用的行为。