我正在使用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
我的问题是,当我点击带有子元素的复选框时,它没有选中(例如火星)。但我没有点击子元素,然后它选中了。请帮助我解决这个问题。如果父元素选中,子元素不应该选中
2条答案
按热度按时间brccelvz1#
checked
是节点值的数组,因此需要分配子节点的值。mbzjlibv2#
让我帮你先申请车工的子值
应该做的另一个更改是在setChecked的参数中添加spread运算符checked,如下所示
这样,当您单击带有子元素的复选框时,它不会选中。单击没有子元素,但它选中。问题也将得到解决:)还有一件事,您也在节点数组中放置了错误的标签
应该是
木星也是如此
让我知道,如果你仍然面临的问题,如果帮助,请upvote这一点!