mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 04:36:19 +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);