mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 05:29:37 +08:00
1.4 KiB
1.4 KiB
order | title |
---|---|
0 | 基本 |
最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。
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 multiple 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);