我的需求是使用cascaser的动态加载和多选功能
首先多选功能是需要4.17.0版本才有的,一开始没注意到自己antd的版本比较低,还以为这两个功能不能合并在一起
还有遇到的一个问题就是需要点击两下才会加载自己数据
首先附上官网的示例代码
const loadData = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
// 这行可设置可不设置
targetOption.loading = true;
setTimeout(() => {
// 这行可设置可不设置
targetOption.loading = false;
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
setOptions([...options]);
}, 1000);
};
重要的是setOptions([...options])这一行
需要注意两点
一是需要拿到更新后的options之后再setOptions
二是如果options是引用类型,可以通过扩展运算符的方式对其浅拷贝一下,再对其重新进行赋值