ant-design/components/cascader/demo/lazy.md

69 lines
1.3 KiB
Markdown
Raw Normal View History

---
order: 9
title:
zh-CN: 动态加载选项
en-US: Load Options Lazily
---
## zh-CN
使用 `loadData` 实现动态加载选项。
> 注意:`loadData` 与 `showSearch` 无法一起使用。
## en-US
Load options lazily with `loadData`.
> Note: `loadData` cannot work with `showSearch`.
2019-05-07 14:57:32 +08:00
```jsx
import { Cascader } from 'antd';
const optionLists = [
2019-05-07 14:57:32 +08:00
{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
},
{
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
},
];
const LazyOptions = () => {
const [options, setOptions] = React.useState(optionLists);
2018-06-27 15:55:04 +08:00
const onChange = (value, selectedOptions) => {
console.log(value, selectedOptions);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
const loadData = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
// load options lazily
setTimeout(() => {
targetOption.loading = false;
2019-05-07 14:57:32 +08:00
targetOption.children = [
{
label: `${targetOption.label} Dynamic 1`,
value: 'dynamic1',
},
{
label: `${targetOption.label} Dynamic 2`,
value: 'dynamic2',
},
];
setOptions([...options]);
}, 1000);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;
};
export default () => <LazyOptions />;
2019-05-07 14:57:32 +08:00
```