我是react的初学者,刚开始做,我被卡住了。我试图实现的是创建一个树视图(尝试过的树视图可用,但它们对我来说太复杂了)。我自己用下面的对象创建了它。
const [state, setState] = useState({
Filters: [
{
value : "Training 1",
name: "Training 1",
options: [
{
value: "Module 1",
name: "Module 1"
},
{
value: "Module 2",
name: "Module 2"
}
]
},
{
value: "Training 2",
name: "Training 2",
options: [
{
value: "Module 3",
name: "Module 3"
}
]
},
{
value: "Training 3",
name: "Training 3",
options: [
{
value: "Module 4",
name: "Module 4"
},
{
value: "Module 5",
name: "Module 5"
}
]
}
],
selected: []
});
下面是我的复选框处理程序
const handleCheckboxChange = (value) => {
setState((state) => {
const updatedEtables = state.selected.find(
(obj) => obj === value
);
const selected = updatedEtables
? state.selected.filter(
(obj) => obj !== value
)
: [...state.selected, value];
return {
selected,
Filters: [
...state.Filters.map((filter) => {
return {
...filter,
options: filter.options.map((ele) => {
return {
...ele,
checked: selected.includes(ele.value)
};
})
};
})
]
};
});
};
下面是我的用户界面
<div>
{state.Filters.map((ele) => {
return (
<React.Fragment>
<h6>{ele.name}</h6>
{ele.options.map((item) => {
return (
<div>
<RiIcons.RiArrowRightSLine />
<input
checked={item.checked || false}
onChange={() => handleCheckboxChange(item.value)}
type="checkbox"
/>
<label>{item.name}</label>
</div>
);
})}
</React.Fragment>
);
})}
<strong>Selected: </strong>
<br />
<span>{state.selected.join(",")}</span>
</div>
我能够创建树状视图,并获得选中复选框的选定值。现在我想要的是两件事。
-
如果用户从不同的培训中选择了两个模块(即,如果用户选择模块1,然后选择模块3),要突出显示或显示错误消息,我想突出显示第二个选择,并显示一个错误,表示一次只能选择一个培训中的模块。
-
我目前正在显示选定的模块,我想创建一个对象,该对象将显示选定的培训和模块,如有人选择模块1和模块2,我想要一个对象,如
[{
价值:“训练1”,
名称:“培训1”,
选项:[
{
值:“模块1”,
名称:“模块1”
},
{
值:“模块2”,
名称:“模块2”
}
]
}]
如果有人能帮我,我将不胜感激。我知道这对专家们来说不是什么大事,但对我来说有点关键,因为我今天必须完成这项工作:/
