我正在尝试制作侧边栏的可折叠列表。点击时,我会更改“isOpen”状态,并根据此状态显示或隐藏子链接。问题是所有的子链接同时打开。
在这里检查沙盒:https://codesandbox.io/s/infallible-moore-h16g6
const Sidebar = ({ title, children, data, opened, ...attrs }) => {
const [isOpen, setTriger] = useState(false);
const handleClick = idx => {
setTriger(!isOpen)
};
return (
<SidebarUI>
{data.map((item, idx) => {
return typeof item.data === "string" ?
<div key={idx} >{item.name}</div>:
<Fragment key={idx}>
<div onClick={() => handleClick(idx)}>{item.name}</div>
{ item.data.map((subs, ids) => {
return <Test isOpen={isOpen} key={ids}>++++{subs.name}</Test>;
})}
</Fragment>
})}
</SidebarUI>
);
};
setCollapse({ ...currentElements, [idx]: !collapseElements[idx] }); };
- Yerlan Yeszhanov...currentElements
),并将被点击的元素及其新值(true/false)添加到相应的位置([idx]: !collapseElements[idx]
)中。在调用setCollapse
之前尝试添加console.log({ ...currentElements, [idx]: !collapseElements[idx] });
以记录状态对象。 - AxelJunes