React中实现Checkbox Treeview单选功能（禁用多选）

核心修改步骤： #

1. 调整选中状态存储
   原代码用数组存储多个选中项，改为单个变量存储当前选中的节点ID：

   // 原代码
   const [selected, setSelected] = useState([]);
   // 修改后
   const [selected, setSelected] = useState(null); // 初始无选中项
   

2. 重写选中事件处理逻辑
   修改handleSelect函数，确保每次点击仅保留当前选中的节点，覆盖之前的选中状态：

   const handleSelect = (event, nodeIds) => {
     const currentId = nodeIds[0];
     // 可选逻辑：点击已选中节点时取消选中，若需强制保持一个选中可删除三元判断
     setSelected(currentId === selected ? null : currentId);
   };
   

3. 关闭多选模式
   从<TreeView>组件中移除multiSelect属性，恢复组件默认的单选基础行为：

   // 原代码
   <TreeView
     multiSelect
     selected={selected}
     onSelect={handleSelect}
     // 其他属性
   >
   // 修改后
   <TreeView
     selected={selected}
     onSelect={handleSelect}
     // 其他属性
   >
   

4. 适配Checkbox选中状态判断
   修改每个TreeItem的selected属性判断逻辑，确保仅当前选中节点的Checkbox处于激活状态：

   <TreeItem
     key={node.id}
     nodeId={node.id}
     label={node.name}
     selected={selected === node.id} // 原判断为selected.includes(node.id)，改为全等匹配
   >
   

效果说明 #

修改完成后，点击任意节点的Checkbox会自动取消之前选中节点的状态，始终保持最多一个节点被选中；若需要强制保持至少一个选中项，可删除handleSelect中的三元判断，直接设置setSelected(currentId)即可。

内容的提问来源于stack exchange，提问作者AlexDemo