mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 13:59:11 +08:00
1.4 KiB
1.4 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 options = [{
value: 'zhejiang',
label: 'Zhejiang',
isLeaf: false,
}, {
value: 'jiangsu',
label: 'Jiangsu',
isLeaf: false,
}];
class LazyOptions extends React.Component {
state = {
options,
};
onChange = (value, selectedOptions) => {
console.log(value, selectedOptions);
}
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);