ant-design/components/cascader/demo/lazy.md
2017-01-19 15:22:53 +08:00

77 lines
1.5 KiB
Markdown

---
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`.
````__react
import { Cascader } from 'antd';
const options = [{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
}, {
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
}];
class LazyOptions extends React.Component {
state = {
inputValue: '',
options,
};
onChange = (value, selectedOptions) => {
console.log(value, selectedOptions);
this.setState({
inputValue: selectedOptions.map(o => o.label).join(', '),
});
}
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',
}];
this.setState({
options: [...this.state.options],
});
}, 1000);
}
render() {
return (
<Cascader
options={this.state.options}
loadData={this.loadData}
onChange={this.onChange}
changeOnSelect
/>
);
}
}
ReactDOM.render(<LazyOptions />, mountNode);
````