ant-design checkedKeys
时间: 2023-08-23 22:05:46 浏览: 44
`checkedKeys`是Ant Design Tree组件的一个属性,用于设置树节点的选中状态。它是一个数组,其中每个元素代表一个选中节点的key。可以将`checkedKeys`与`onCheck`事件结合使用,当用户选中或取消选中节点时,会触发`onCheck`事件,从而更新`checkedKeys`数组。
例如,以下代码片段展示了如何将一个受控的Tree组件与`checkedKeys`和`onCheck`属性结合使用:
```jsx
import { Tree } from 'antd';
const { TreeNode } = Tree;
class Demo extends React.Component {
state = {
checkedKeys: [],
};
onCheck = checkedKeys => {
console.log('onCheck', checkedKeys);
this.setState({ checkedKeys });
};
render() {
const { checkedKeys } = this.state;
return (
<Tree
checkable
checkedKeys={checkedKeys}
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: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
);
}
}
```
在上面的例子中,`checkedKeys`数组保存了被选中的节点的key,`onCheck`事件在用户选中或取消选中节点时触发,用于更新`checkedKeys`数组。在render函数中,`checkedKeys`和`onCheck`属性被传递给了Tree组件,从而实现了一个受控的Tree组件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)