mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
654a675532
* Remove fixed width from cascader examples * Replace fixed vertical slider example height with clearfix div * Replace fixed width on TreeSelect examples with percentage width * Update test snapshots * Use inline-block rather than float left for vertical slider example
1.6 KiB
1.6 KiB
order | title | ||||
---|---|---|---|---|---|
5 |
|
zh-CN
异步加载树节点。
en-US
Asynchronous loading tree node.
import { TreeSelect } from 'antd';
class Demo extends React.Component {
state = {
value: undefined,
treeData: [
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
],
};
genTreeNode = (parentId, isLeaf = false) => {
const random = Math.random()
.toString(36)
.substring(2, 6);
return {
id: random,
pId: parentId,
value: random,
title: isLeaf ? 'Tree Node' : 'Expand to load',
isLeaf,
};
};
onLoadData = treeNode =>
new Promise(resolve => {
const { id } = treeNode.props;
setTimeout(() => {
this.setState({
treeData: this.state.treeData.concat([
this.genTreeNode(id, false),
this.genTreeNode(id, true),
]),
});
resolve();
}, 300);
});
onChange = value => {
console.log(value);
this.setState({ value });
};
render() {
const { treeData } = this.state;
return (
<TreeSelect
treeDataSimpleMode
style={{ width: '100%' }}
value={this.state.value}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
onChange={this.onChange}
loadData={this.onLoadData}
treeData={treeData}
/>
);
}
}
ReactDOM.render(<Demo />, mountNode);