reactjs - 使用 Hooks 在 React Js 中切换多个部分的问题
问题描述
当我有两个不同的“全选”按钮时,切换不起作用。当前的功能是“全选”和单选。它在同一个列表中的另一个“全选”不起作用。
<div>
{othersinfo?.map(({ icon, title, subTitle }, index) => {
return (
<>
<div key={index} className='events__firstSection'>
<div className='events__agreeToAllContainer'>
{icon && (
<Icon name={icon} className='events__noticeIcon' isForceDarkMode />
)}
<div className={icon ? 'events__text' : 'events__text events__leftAlign '}>
{title}
</div>
</div>
<Toggle
containerClass='events__toggle'
checked={toggledItems.includes(title)}
onToggle={(isToggled) => toggleItem(isToggled, title)}
/>
</div>
{subTitle && <div className='events__description'>{subTitle}</div>}
<div className={index !== eventsnfo.length - 1 && 'events__divider'}></div>
</>
);
})}
</div>;
切换项操作
const toggleItem = (isToggled, value) => {
let items = [...toggledItems];
if (isToggled) {
items =
value === "select All"
? eventsnfo?.map((events) => events.title)
: [...items, value];
if (items?.length === eventsnfo?.length - 1) {
items.push("select All");
}
} else {
items =
value === "select All"
? []
: [...items.filter((item) => item !== value && item !== "select All")];
}
setToggledItems(items);
};
解决方案
您可以通过如下更改您的toggleItem
功能来实现此功能。
const toggleItem = (isToggled, value) => {
let items = [...toggledItems];
const subItemArray = titleArray
?.filter((events) => events.type === "subItems")
.map((filteredArray) => filteredArray.title);
if (isToggled) {
items =
value === "select All"
? titleArray?.map((events) => events.title)
: value === "sub select All"
? [...subItemArray, ...items]
: [...items, value];
if (
subItemArray.every((val) => items.includes(val)) &&
!items.includes("sub select All")
) {
items.push("sub select All");
}
if (items?.length === titleArray?.length - 1) {
items.push("select All");
}
} else {
items =
value === "select All"
? []
: value === "sub select All"
? items.filter(
(el) =>
!subItemArray.includes(el) &&
el !== "sub select All" &&
el !== "select All"
)
: [
...items.filter((item) => item !== value && item !== "select All")
];
if (
subItemArray.includes(value) &&
items.indexOf("sub select All") >= 0
) {
items.splice(items.indexOf("sub select All"), 1);
}
}
setToggledItems(items);
};
这是演示
推荐阅读
- c - 用于 x86 输入/输出端口 I/O 的 C 内联 asm 操作数大小不匹配
- sql-server - 是否可以使用 Apache NiFi 作为 MS SQL Server 数据库内计算的数据流引擎?
- android - 观察对象发生变化时视图层中不必要的操作
- java - 批量删除具有给定属性(或属性)的所有实体
- java - 在不丢失数据的情况下减小字节数组的大小
- r - 在地区级别将图像自动转换为 PDF
- uml - 在依赖、关联、聚合和组合之间做出决定时要考虑的正确概念级别?
- ruby-on-rails - Ruby on Rails 博客以及在帖子中添加评论以及编辑和删除评论
- angular - 无法读取未定义的属性“文档”
- python - 将列表分组为子列表,由python中的字母元素分隔