handleExpand函数正在网格中更改多个物料UI卡片

Question

我的同事使用Material UI创建了一个网格；网格中的每一行都有3-5个Material UI卡片，每个卡片都需要有一个"expand“选项来显示更多细节。对于网格中的每一行，我们使用redux/hooks来引入数据；每条记录都有相同的字段(例如，每条记录可能有一个"name“、"year”等字段)。我们遇到的问题是，当我们在网格的一行上展开“姓名”卡时，它会展开网格中的所有“姓名”卡。我一直在努力寻找解决方案，但什么也想不出来。以下是包含示例数据的codesandbox的链接：

https://codesandbox.io/s/inspiring-stallman-jtjss?file=/src/App.js

Answer 1

你拥有的每个卡片容器都应该实现它自己的展开/折叠功能。

您可以创建一个包装特定卡片的新组件(例如<CardWrapper />) )，该组件将拥有自己的状态(expandedName、setExpandedName)，依此类推。

一个又快又脏的解决方案可能如下所示：

const CardWrapper = (dataExample) => {
  const dispatch = useDispatch();
  [expandedName, setExpandedName] = useState(false);
  const handleExpandClickName = () => {
    setExpandedName(!expandedName)
  };

  return (
    <div className={classes.root}>
      <Grid>
        <Card>
           <CardActions disableSpacing>
             <IconButton
               key={dataExample.key}
               className={clsx(classes.expand, {
                 [classes.expandOpen]: expandedName,
               })}
               onClick={() => dispatch(handleExpandClickName)}
               aria-expanded={expandedName}
               aria-label="show more"
             >
               <ExpandMoreIcon />
             </IconButton>
           </CardActions>
           <Collapse in={expandedName} timeout="auto" unmountOnExit>
             <CardContent>
               <Typography paragraph>Test</Typography>
             </CardContent>
           </Collapse>
         </Card>
       </Grid>
    </div>);
}

在你的代码中，你应该使用类似这样的东西：

const ServiceAreaTile = () => {
  const psOverviewSA = useSelector((state) => state.psOverviewSA);

  return psOverviewSA.map((dataExample) => {
    return (<CardWrapper dataExample={dataExample} />);
  }
}

这样，每个CardWrapper都会在内部保持展开状态，并且它们之间不会有任何冲突。