javascript 检查父项,但不应检查子项

dohp0rv5  于 2023-02-07  发布在  Java
关注(0)|答案(2)|浏览(96)

我正在使用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
我的问题是,当我点击带有子元素的复选框时,它没有选中(例如火星)。但我没有点击子元素,然后它选中了。请帮助我解决这个问题。如果父元素选中,子元素不应该选中

brccelvz

brccelvz1#

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

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

mbzjlibv2#

让我帮你先申请车工的子值

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

应该做的另一个更改是在setChecked的参数中添加spread运算符checked,如下所示

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

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

value: "saturn",
    label: "Satrun"

应该是

value: "saturn",
    label: "saturn"

木星也是如此
让我知道,如果你仍然面临的问题,如果帮助,请upvote这一点!

相关问题