一次只展开一个折叠 (material-ui)-React-码文网

我有表，我可以扩展折叠材料-ui。一切都很完美。

但是有一件事我想更新，当我点击展开时，一次只打开一个展开折叠。

const InvoiceInfo = ({el}) => {
const [open, setOpen] = React.useState(false)
}
function handleExpand() {
    setOpen(!open)
  }
return (
<>
<TableRow key={el.id}>
    <TableCell>
       {el.name}
    </TableCell>
    <TableCell>
        <IconButton onClick={handleExpand}>
                {open ? (
                  <KeyboardArrowUp fontSize="large" />
                ) : (
                  <KeyboardArrowDown fontSize="large" />
                )}
         </IconButton>
    </TableCell>
</TableRow>
{
<TableRow>
    <Collapse in={open} timeout="auto" unmountOnExit>
        <div>
           EXPAND ROW
        </div>
    </Collapse>
</TableRow>
}
</>
)

上面是我的代码看起来像。

任何建议对我来说都是非常有意义的。

您可以根据数组的索引或给定的数字 / 值使用简单的状态：

const [isOpenCollapse, setIsOpenCollapse] = useState(null);
const handleOpen = (clickedIndex) => {
  if (isOpenCollapse === clickedIndex) {
    setIsOpenCollapse(null);
  } else {
    setIsOpenCollapse(clickedIndex);
  }
};
[...]
return (
  <List>
    {arr.map((elm, index) => {
      return (
        <>
          <ListItem key={elm.ID} onClick={() => handleOpen(index)} id="listItem">
            {isOpenCollapse === index ? <ExpandLess /> : <ExpandMore />}
            <Box>
              <Typography>{elm.label}</Typography>
            </Box>
          </ListItem>
          <Collapse in={isOpenCollapse === index} timeout="auto" unmountOnExit>
            <p>PUT SOMETHING HERE</p>
          </Collapse>
        </>
      );
    })}
  </List>;
)

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处