Question

我正在使用React和Material UI来显示一些映射的映射卡。当我尝试扩展卡时，所有卡同时扩展。我发现我必须在“ handleExpandClick”函数中传递一个索引，但仍然无法正常工作。也许我做了错别字。

我发现这个问题Expand one card on click涉及相同的问题，但似乎不适用于我的情况。

这是我的代码：

任何建议或指导将不胜感激。预先谢谢你。

Answer 1

在扩展处理程序中，您确实必须传递索引。并在状态下使用它。像这样的东西：

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>

这是一个有效的示例：https://codesandbox.io/s/eloquent-sara-wswrn

React和Material UI：如何仅扩展一张卡

1 个答案: