当我单击一个按钮时，它会同时打开所有按钮

Question

当我点击 post 按钮时，它会打开所有按钮，例如媒体和用户。我试图定义状态功能，但是当我点击一个按钮时，所有按钮都会同时打开。

this problem i am facing

我的代码在这里

导出默认函数 ListItem() {

const [open, setOpen] = React.useState(false);


const handleClick = () => {
    setOpen(!open);
};


return (
    <div>
        <List
            sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
        >
            {/* dashbord */}
            <ListItemButton component="a" href="#simple-list">
                <ListItemIcon>
                    <DashboardTwoToneIcon />
                </ListItemIcon>
                <ListItemText primary="DashBoard" />
            </ListItemButton>

            {/* post */}
            <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                    <PostAddTwoToneIcon />
                </ListItemIcon>
                <ListItemText primary="Post" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="New post" component="a" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="All posts" />
                    </ListItemButton>
                </List>
            </Collapse>

            {/* Media */}
            <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                    <SubscriptionsTwoToneIcon />
                </ListItemIcon>
                <ListItemText primary="Media" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="All Media" component="a" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="Add New Media" />
                    </ListItemButton>
                </List>
            </Collapse>

Answer 1

您在单击任何对象时调用函数 setOpen，但是 setOpen 似乎更改了用于确定是否应显示内容的全局变量的状态。尝试为每个按钮设置一个唯一的变量作为打开状态，并且只使用 onClick

中的函数更改此变量

Answer 2

您正在为所有这些使用单个布尔状态。我建议将要切换的每个 item/element 的打开状态存储在一个对象中，并检查特定 item/element 当前是否已打开。

const [open, setOpen] = React.useState({});

const handleClick = (id) => () => {
  setOpen(open => ({
    ...open,
    [id]: !open[id],
  }));
};

...

<ListItemButton onClick={handleClick("post")}> // <-- pass id
  <ListItemIcon>
    <PostAddTwoToneIcon />
  </ListItemIcon>
  <ListItemText primary="Post" />
  {open["post"] ? <ExpandLess /> : <ExpandMore />} // <-- check by id
</ListItemButton>
<Collapse
  in={open["post"]} // <-- check by id
  timeout="auto"
  unmountOnExit
>
  <List component="div" disablePadding>
    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
      <ListItemText primary="New post" component="a" />
    </ListItemButton>
    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
      <ListItemText primary="All posts" />
    </ListItemButton>
  </List>
</Collapse>

对其他按钮和可折叠元素应用相同的方法，但使用特定的唯一键。

当我单击一个按钮时，它会同时打开所有按钮

When i click one button its open all buttons simultaneously

onclick

button

reactjs