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

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

我有表,我可以扩展折叠材料-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>
}
</>
)

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

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

1

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

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>;
)

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

(238)
如何使用 CSS制作具有固定标题的可滚动表
上一篇
我在我的常规图表中使用了TrueStrength指数我可以在tradingview的cryptoscreener中使用它吗
下一篇

相关推荐

  • vscode code命令:# 如何使用 VSCode 命令

    VSCode Code命令是Visual Studio Code的一个内置命令,用于在本地和远程服务器上执行代码。它可以让你在不同的系统上运行代码,而不需要安装任何软件。…

    2023-01-22 09:55:35
    0 26 91
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-01-30 08:19:31
    0 62 61
  • cv树洞柒夜事件CV树洞中的秘密与惊奇

    cv树洞柒夜事件是一个有趣的计算机视觉活动,它提供了一种新的方式来利用计算机视觉技术来探索和发现景观。它始于2020年7月,由一群热爱计算机视觉的研究者和开发者发起,他们希望通过使用机器学习技术来探索景观中的精彩之处。cv树洞柒夜事件的目标是使用机器学习技术来探索景观中的精彩之处,并利用这些发现来改善景观设计。参与者需要使用机器学习技术来探索景观,并利用这些发现来改善景观设计。参与者可以使用Python,OpenCV,TensorFlow等技术来完成任务,并将其发布在GitHub上。…

    2023-01-08 12:49:50
    0 29 56
  • cv小随:如何利用CV技术提升求职成功率

    示例示例cv小随是一种基于计算机视觉的智能技术,它可以帮助用户自动识别图像中的物体、场景和行为,从而实现自动化的图像处理。cv小随可以用于多种应用场景,如图像搜索、图像分类、图像识别、图像检测等。…

    2023-01-01 11:12:42
    0 97 21
  • win10可以安装cad2007吗:CAD2007是否可以在Win10上安装?

    不可以,因为CAD2007不支持Windows 10系统。如果想要安装CAD2007,需要安装在Windows XP或者Windows 7系统上。…

    2023-01-20 02:04:42
    0 60 36
  • iban code是什么意思一种国际银行帐户号码标准

    IBAN(International Bank Account Number)代码是一种国际标准的银行账户号码,用于在不同国家之间进行国际转账。它由一串字母和数字组成,通常由2至4个字母开头,后面跟着一串数字。…

    2022-12-30 09:24:47
    0 69 40
  • cv 机器视觉:如何利用机器视觉技术提高图像处理效率

    CV(Computer Vision)机器视觉是一门研究计算机如何理解和处理图像的学科,它旨在使计算机能够以人类般的方式识别和理解图像。它主要应用于图像处理、图像分析、计算机视觉等领域,广泛应用于机器人、自动驾驶、医疗影像分析等领域。…

    2023-01-23 11:32:51
    0 32 32
  • mac 开发c++:Mac 下开发 C++ 的入门指南

    示例示例Mac OS X 是一个强大的操作系统,可以用来开发 C++ 应用程序。下面是一个简单的 C++ 程序的代码示例:#include…

    2023-01-02 10:39:58
    0 69 37

发表评论

登录 后才能评论

评论列表(75条)