mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 15:49:10 +08:00
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
使用勾选框实现多选功能。
en-US
Multiple and checkable.
import { TreeSelect } from 'antd';
const { SHOW_PARENT } = TreeSelect;
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
},
],
},
];
class Demo extends React.Component {
state = {
value: ['0-0-0'],
};
onChange = value => {
console.log('onChange ', value);
this.setState({ value });
};
render() {
const tProps = {
treeData,
value: this.state.value,
onChange: this.onChange,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
placeholder: 'Please select',
style: {
width: '100%',
},
};
return <TreeSelect {...tProps} />;
}
}
ReactDOM.render(<Demo />, mountNode);