javascript - React 和 Material UI:如何仅扩展一张卡片
问题描述
我正在使用 React 和 Material UI 来显示一些映射的卡片。当我尝试扩展一张卡片时,所有卡片都会同时展开。我发现我必须在“handleExpandClick”函数中传递一个索引,但仍然无法正常工作。也许我做了某种错字。
我发现这个问题Expand one card on click涉及相同的问题,但似乎不适用于我的情况。
这是我的一段代码:
const useStyles = makeStyles(theme => ({
card: {
maxWidth: 345,
marginBottom: 15
},
media: {
height: 0,
paddingTop: "56.25%" // 16:9
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
width: 90
},
root: {
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(0.5)
}
},
list: {
width: 200
}
}));
const ItininerariesList = ({ itineraries, activities }) => {
const classes = useStyles();
const [expanded, setExpanded] = React.useState(false);
let path = window.location.pathname;
let currentId = path.substring(path.lastIndexOf("/") + 1);
const itinerariesPerCity = itineraries.filter(
itiner => itiner.city_id === currentId
);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Fragment>
{itinerariesPerCity.map((itinerary, i) => (
<Card className={classes.card} key={itinerary._id}>
<CardHeader
avatar={
<Grid
container
direction="column"
justify="flex-start"
alignItems="center"
className={classes.avatar}
>
<Avatar
aria-label="user"
alt={itinerary.profile_name}
src={itinerary.profile_img}
>
<PersonIcon />
</Avatar>
<Typography variant="caption" component="p">
{itinerary.profile_name}
</Typography>
</Grid>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title={itinerary.title}
subheader={itinerary.sub_title}
/>
<CardContent>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={() => handleExpandClick()}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<ActivitiesList
activities={activities}
itineraryId={itinerary._id}
/>
</CardContent>
</Collapse>
</Card>
))}
</Fragment>
);
};
export default ItininerariesList;
任何建议或指导将不胜感激。先感谢您。
解决方案
在扩展处理程序中,您确实必须传递索引。并且还在该州使用它。类似的东西:
const [expandedId, setExpandedId] = React.useState(-1);
...
const handleExpandClick = (i) => {
setExpandedId(expandedId === i ? -1 : i);
};
...
<CardContent />
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<IconButton
onClick={() => handleExpandClick(i)}
aria-expanded={expandedId === i}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expandedId === i} timeout="auto" unmountOnExit>
<CardContent>
<div>ActivitiesList</div>
</CardContent>
</Collapse>
推荐阅读
- java - 如何优化我的回溯解决方案以匹配正则表达式?
- javascript - 数据驱动的 CSS 网格 Vue 组件
- amazon-web-services - 如何通过 Codepipeline 在 CFN 模板中部署多个 Lambda?
- java - Servlet:HTTP 状态 404 - 未找到
- c# - 使用带有 c# httpclient 的令牌的身份验证错误
- oracle - 关于 Oracle 11G 中的 Inventory 目录,哪两个是正确的?
- python - 在 google colab notebook 中看不到 TensorFlow 日志
- facebook - 无法通过 Post API 隐藏/取消隐藏 Facebook 评论
- linux - Ubuntu 上的 TMUX 问题:新会话顶部总是有一行文本
- php - Mysql 数据库更新,但即使我刷新,我在 php html 中的表也不会更新