antd 中 Tree 的使用-默认选中问题

原创

我是大头鸟 2022-07-08 06:31:35 博主文章分类：react ©著作权

文章标签 antd react tree 子节点父节点 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者我是大头鸟的原创作品，请联系作者获取转载授权，否则将追究法律责任

在使用antd的Tree 控件的控件的时候，数据回显的时候发现所有的都选中了，很奇怪

<Tree 
               checkable ={true}
               showLine = {true}
           multiple={true}
               titleRender = {(nodeData) => {return <span style = {{fontSize: '18px',}} > {nodeData.title} < /span>}}
           defaultCheckedKeys={this.state.defaultCheckedKeys}
               defaultExpandedKeys = {this.state.defaultCheckedKeys}
               onCheck = {this.onCheck}
           autoExpandParent={true}
               treeData = {this.state.treeData}
          />

我是这样设置的 defaultCheckedKeys

defaultCheckedKeys	默认选中复选框的树节点

默认选择的节点，为什么选中了所有的节点

并且有一个特点是，如果父节点是选中状态，那么子节点就默认选中了，那么这样的回显并不是准确的，所以问题在于当回显的时候父节点被选中了，子节点不需要被选中

checkedKeys	（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置 `checkable` 和 `checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联	string[] \| {checked: string[], halfChecked: string[]}	[]
checkStrictly	checkable 状态下节点选择完全受控（父子节点选中状态不再关联）

checkStrictly 可以实现这个功能

<Tree 
               checkable
           checkStrictly
               showLine
           multiple
           autoExpandParent
               titleRender = {(nodeData) => {return <span style = {{fontSize: '18px',}} > {nodeData.title} < /span>}}
           defaultCheckedKeys={this.state.defaultCheckedKeys}
               defaultExpandedKeys = {this.state.defaultCheckedKeys}
               onCheck = {this.onCheck}
               treeData = {this.state.treeData}
          />