react-checkbox-tree组件问题：父节点无法勾选，需实现父选子不选

问题描述 #

使用react-checkbox-tree开发带复选框的树形视图时，点击带有子节点的父节点（如示例中的Mars）无法完成勾选操作，但无子节点的元素可正常勾选。需求实现父节点勾选时仅选中自身，不关联子节点的功能。

原代码问题分析 #

原updateCheckedState函数中，针对父节点（isParent为true）设置了updatedValues = []空数组，导致勾选父节点时没有将父节点的value加入checked状态数组，因此无法显示勾选状态。

修复方案 #

修改状态更新逻辑，无论节点是否为父节点，都仅操作当前节点的value，不涉及子节点：

const nodes = [
  {
    value: "mars",
    label: "Mars",
    children: [
      {
        value: "phobos",
        label: "Phobos"
      },
      { value: "deimos", label: "Deimos" }
    ]
  },
  {
    value: "saturn",
    label: "Saturn"
  },
  {
    value: "jupiter",
    label: "Jupiter"
  }
];

function Widget() {
  const [checked, setChecked] = useState([]);
  const [expanded, setExpanded] = useState([]);

  const updateCheckedState = (node) => {
    const targetValue = node.value;

    if (node.checked) {
      // 勾选：若目标值未在已选列表中则添加
      if (!checked.includes(targetValue)) {
        setChecked([...checked, targetValue]);
      }
    } else {
      // 取消勾选：过滤掉目标值
      setChecked(checked.filter(val => val !== targetValue));
    }
  };

  return (
    <CheckboxTree
      iconsClass="fa5"
      nodes={nodes}
      checked={checked}
      expanded={expanded}
      onCheck={(nodes, node) => updateCheckedState(node)}
      onExpand={(expanded) => setExpanded(expanded)}
    />
  );
}

关键修改说明 #

1. 简化状态操作逻辑：不再区分父/子节点，直接以当前点击节点的value为操作对象
2. 勾选逻辑优化：添加前先判断值是否已存在，避免重复添加
3. 取消勾选逻辑：直接过滤掉目标值，确保仅移除当前节点的选中状态
4. 修正拼写错误：同步修正了原节点数据中的拼写问题（Satrun→Saturn、Jupitor→Jupiter）

修改后即可实现：父节点点击可正常勾选/取消，且勾选父节点时不会自动选中子节点，每个节点的选中状态完全独立。

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