---
order: 1
title:
zh-CN: 受控操作示例
en-US: basic controlled example
---
## zh-CN
受控操作示例
## en-US
basic controlled example
````__react
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
const Demo = React.createClass({
getInitialState() {
return {
expandedKeys: ['0-0-0', '0-0-1'],
autoExpandParent: true,
checkedKeys: ['0-0-0'],
selectedKeys: [],
};
},
onExpand(expandedKeys) {
console.log('onExpand', arguments);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.setState({
expandedKeys,
autoExpandParent: false,
});
},
onCheck(checkedKeys) {
this.setState({
checkedKeys,
selectedKeys: ['0-3', '0-4'],
});
},
onSelect(selectedKeys, info) {
console.log('onSelect', info);
this.setState({ selectedKeys });
},
render() {
const loop = data => data.map((item) => {
if (item.children) {
return (
{loop(item.children)}
);
}
return ;
});
return (
{loop(gData)}
);
},
});
ReactDOM.render(, mountNode);
````