2015-12-28 19:16:02 +08:00
|
|
|
# 基本
|
|
|
|
|
|
|
|
- order: 0
|
|
|
|
|
|
|
|
最简单的用法。
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
````jsx
|
|
|
|
import { TreeSelect } from 'antd';
|
|
|
|
const TreeNode = TreeSelect.TreeNode;
|
2016-01-15 20:10:46 +08:00
|
|
|
import React from 'react';
|
2015-12-28 19:16:02 +08:00
|
|
|
|
|
|
|
const Demo = React.createClass({
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
2015-12-29 15:33:09 +08:00
|
|
|
value: 'leaf1',
|
2015-12-28 19:16:02 +08:00
|
|
|
};
|
|
|
|
},
|
2016-01-15 20:10:46 +08:00
|
|
|
onChange(value) {
|
2015-12-28 19:16:02 +08:00
|
|
|
this.setState({value});
|
|
|
|
},
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div style={{margin: 20}}>
|
|
|
|
<h2>Single Select</h2>
|
|
|
|
<TreeSelect style={{width: 300}} showSearch
|
2016-01-08 14:41:05 +08:00
|
|
|
value={this.state.value} optionLabelProp="title"
|
|
|
|
dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
|
|
|
|
treeDefaultExpandAll
|
|
|
|
onChange={this.onChange}>
|
2015-12-28 19:16:02 +08:00
|
|
|
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
|
|
|
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
2015-12-29 15:33:09 +08:00
|
|
|
<TreeNode value="leaf1" title="my leaf" key="random" />
|
|
|
|
<TreeNode value="leaf2" title="your leaf" key="random1" />
|
2015-12-28 19:16:02 +08:00
|
|
|
</TreeNode>
|
2015-12-28 19:19:02 +08:00
|
|
|
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
|
|
|
|
<TreeNode value="sss" title={<span style={{color: 'red'}}>sss</span>} key="random3" />
|
2015-12-28 19:16:02 +08:00
|
|
|
</TreeNode>
|
|
|
|
</TreeNode>
|
|
|
|
</TreeSelect>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
ReactDOM.render(
|
|
|
|
<Demo />
|
|
|
|
, document.getElementById('components-tree-select-demo-basic'));
|
|
|
|
````
|