Ant-Design-React Cascader级联动态选择组件使用指南
先来看看官网里面的例子https://ant.design/components/cascader-cn/#components-cascader-demo-lazy
import { Cascader } from 'antd';//4.15.0
const optionLists = [
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
];
const LazyOptions = () => {
const [options, setOptions] = React.useState(optionLists);
const onChange = (value, selectedOptions) => {
console.log(value, selectedOptions);
};
const loadData = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
// load options lazily
setTimeout(() => {
targetOption.loading = false;
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
setOptions([...options]);
}, 1000);
};
return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
};
ReactDOM.render(<LazyOptions />, mountNode);
需求:产品有三级分类,前端需要调接口查询第一级分类然后根据用户选择的第一级code查询第二级的分类数据,最后通过选择的第二级数据查询第三级数据。
首先,我们先要理解Cascader运作的方法:options为总的数据源,不管是二级还是三级的数据都储存在options中(特别注意,在对targetOption进行操作以后,ant已经在options中自动整合targetOption,但是react是不知道你的options已经变了的,所以要调用setOptions让react组件知道数据发生了变化然后自动刷新组件)。loadData为动态加载的方法,每次select中的数据有一个isLeaf标志,表明该节点是否为树叶节点,如果为true则表明这级后面已经没数据了,为fales的话则是表明后面还有下一级的数据并且会自动调用loadData方法。大致了解了运作方法之后,下面结合需求用伪代码实现一下。
import { Cascader } from 'antd';//4.15.0
const optionLists = [
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
];
const LazyOptions = () => {
const [options, setOptions] = React.useState(optionLists);
const onChange = (value, selectedOptions) => {
console.log(value, selectedOptions);
};
const loadData = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1]; //selectedOptions.length指的是目前有几级
targetOption.loading = true;
// load options lazily
ajax('...',{value:selectedOptions.value}).then((res) => { //用选中的那一项的value给后端去请求下一级的数据,如果回来的数据带有isLeaf为false的标志,会自动再调用loadData方法
targetOption.loading = false;
targetOption.children = res.data //把请求到的数据放入targetOption
setOptions([...options]);//目的是更新Cascader组件
});
};
return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
};
ReactDOM.render(<LazyOptions />, mountNode)
这个动态加载的功能在官网里面写的不是很详细,所以在这里总结一下。希望antd官网能越办越好!