我有表，我可以扩展折叠材料-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>;
)
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（47条）