父母检查但孩子不应该检查答案

【问题标题】：parent check but children should not checked父母检查但孩子不应该检查
【发布时间】：2023-02-06 00:20:43
【问题描述】：

我正在使用 react checkbox tree 包。我有一个带有复选框的树视图，如下所示。

    const nodes = [
  {
    value: "mars",
    label: "Mars",
    children: [
      {
        value: "phobos",
        label: "Phobos"
      },
      { value: "deimos", label: "Deimos" }
    ]
  },
  {
    value: "saturn",
    label: "Satrun"
  },
  {
    value: "jupitor",
    label: "Jupitor"
  }
];

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

  const updateCheckedState = (node) => {
    const childValues = [];
    const isParent = node.isParent;

    const updatedValues = isParent ? childValues : [node.value];

    if (node.checked) {
      setChecked([...updatedValues]);
    } else {
      const filteredChecks = checked.filter((check) => {
        return !updatedValues.includes(check);
      });
      setChecked(filteredChecks);
    }
  };

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

完整的例子是here

我的问题是当我点击带有孩子的复选框时它没有被选中（例如火星）。但是我没有点击任何子元素然后它检查了。请帮我解决这个问题。如果父母检查，孩子不应该检查

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

checked 是节点值数组，因此您需要分配孩子的值。

const updatedValues = isParent
  ? node.children.map((v) => v.value)
  : [node.value];

【讨论】：

【解决方案2】：

让我来协助你首先对子值应用三元运算符

const childValues = node.children ? node.children.map(child => child.value) : [];

您应该做的另一个更改是像这样在 setChecked 的参数中添加 spread operator checked

if(node.checked) { 
setChecked([...checked, ...updatedValued]); 
}

这样，当您单击带有子项的复选框时，它不会被选中。单击没有子元素但它检查。问题也将得到解决:) 还有一件事你也在节点数组中放置了错误的标签

value: "saturn",
    label: "Satrun"

应该

value: "saturn",
    label: "saturn"

木星也是如此

如果您仍然面临问题，请告诉我，如果有帮助，请投票！

【讨论】：