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

64 lines
1.5 KiB
Markdown

---
order: 0
title:
zh-CN: 基本
en-US: basic
---
## zh-CN
最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。
## en-US
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
````__react
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const Demo = React.createClass({
getDefaultProps() {
return {
keys: ['0-0-0', '0-0-1'],
};
},
getInitialState() {
const keys = this.props.keys;
return {
defaultExpandedKeys: keys,
defaultSelectedKeys: keys,
defaultCheckedKeys: keys,
};
},
onSelect(info) {
console.log('selected', info);
},
onCheck(info) {
console.log('onCheck', info);
},
render() {
return (
<Tree className="myCls" showLine checkable
defaultExpandedKeys={this.state.defaultExpandedKeys}
defaultSelectedKeys={this.state.defaultSelectedKeys}
defaultCheckedKeys={this.state.defaultCheckedKeys}
onSelect={this.onSelect} onCheck={this.onCheck}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
);
},
});
ReactDOM.render(<Demo />, mountNode);
````