mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
9 |
|
zh-CN
使用 loadData
实现动态加载选项。
注意:
loadData
与showSearch
无法一起使用。
en-US
Load options lazily with loadData
.
Note:
loadData
cannot work withshowSearch
.
import { Cascader } from 'antd';
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 />;
};
export default () => <LazyOptions />;