如何展开被点击的卡片并且不会触发其他卡片展开？

Question

我正在使用材质 ui，并且我有一张动态卡片。一旦我单击该图标展开该特定卡片，它也会触发其他卡片展开。如何只展开被点击的特定卡片，而不会触发其他卡片同时展开？

const useStyles = makeStyles((theme) => ({
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
}));

const orders = () => {
  const classes = useStyles();
  const [items, setItems] = useState([]);


  const [expanded, setExpanded] = useState(false);
  const handleExpandClick = () => {
    setExpanded(!expanded);
  };


  return (
    <div>
                <div>
                  {items.map((order) => (
                      <Grid key={order.id}>
                        <Card className={classes.card}>
                          <CardContent>
                            //some content here
                          </CardContent>
                          <CardActions disableSpacing>
                            <Tooltip title="Show More">
                              <IconButton
                                className={clsx(classes.expand, {
                                  [classes.expandOpen]: expanded,
                                })}
                                onClick={handleExpandClick}
                                aria-expanded={expanded}
                                aria-label="show more"
                                color="secondary"
                                style={{ margin: "0 auto" }}
                              >
                                <ExpandMoreIcon fontSize="large" />
                              </IconButton>
                            </Tooltip>
                          </CardActions>
                          <Collapse in={expanded} timeout="auto" unmountOnExit>
                            <CardContent>
                              // content inside the expanded card
                            </CardContent>
                          </Collapse>
                        </Card>
                      </Grid>
                    ))}
              )}
            </div>
          )}
        </div>
      
    </div>
  );
};

export default Cancelled;

Answer 1

这是更新后的代码，应该可以按照您的意愿工作，但您可能需要根据需要进行修改，如果您觉得有帮助，请告诉我

const useStyles = makeStyles((theme) => ({
      expand: {
        transform: "rotate(0deg)",
        marginLeft: "auto",
        transition: theme.transitions.create("transform", {
          duration: theme.transitions.duration.shortest,
        }),
      },
      expandOpen: {
        transform: "rotate(180deg)",
      },
    }));
    
    const orders = () => {
      const classes = useStyles();
      const [items, setItems] = useState([]);
    
    
      const [expanded, setExpanded] = useState(false);
      const [selectedId, setSelectedId] = useState(-1);
      const handleExpandClick = (orderId) => {
         if(selectedId === orderId){
           setSelectedId(-1);
         } else {
          setSelectedId(orderId);
         }
        
      };
    
    
      return (
        <div>
                    <div>
                      {items.map((order) => (
                          <Grid key={order.id}>
                            <Card className={classes.card}>
                              <CardContent>
                                //some content here
                              </CardContent>
                              <CardActions disableSpacing>
                                <Tooltip title="Show More">
                                  <IconButton
                                    className={clsx(classes.expand, {
                                      [classes.expandOpen]: expanded,
                                    })}
                                    onClick={()=>handleExpandClick(order.id)}
                                    aria-expanded={expanded}
                                    aria-label="show more"
                                    color="secondary"
                                    style={{ margin: "0 auto" }}
                                  >
                                    <ExpandMoreIcon fontSize="large" />
                                  </IconButton>
                                </Tooltip>
                              </CardActions>
                              <Collapse in={order.id === selectedId ? true : false} timeout="auto" unmountOnExit>
                                <CardContent>
                                  // content inside the expanded card
                                </CardContent>
                              </Collapse>
                            </Card>
                          </Grid>
                        ))}
                  )}
                </div>
              )}
            </div>
          
        </div>
      );
    };
    
    export default Cancelled;