使用handleEvent时仅激活一张卡

Question

我正在从数据库中渲染元素列表（每个元素都有自己的属性等），然后问题是当我按下打开卡的功能时，它会全部打开。我不知道该怎么解决。我当时在考虑使用变量，但我不知道在哪里放置它。

用于打开卡的功能

const handleExpandClick = () => {
    setExpanded(!expanded);
};

const handleOpenModal = () => {
    setOpenModal(true);
};

const handleCloseModal = () => {
    setOpenModal(false);
};

返回声明

<Grid container className={classes.fondo}>
        <Paper>
        <Grid item xs={12}>
            <Button onClick={handleOpenModal} variant="contained" color="primary">Nueva casa de dia</Button>
        </Grid>

                <Grid item xs={12}>
                    <Grid container spacing={3}>
                    {casasDeDia.map((casa) => (
                        <Grid item>
                            <Card className={classes.root}>
                                <CardHeader
                                    title={casa.nombre}
                                    subheader={"Apertura "+casa.horarioApertura + "- Cierre " + casa.horarioCierre}
                                />
                                <CardMedia
                                    className={classes.media}
                                    image={casa.foto}
                                    title={casa.nombre}
                                />
                                <CardContent>
                                    <Typography variant="body2" color="textSecondary" component="p">
                                        {casa.direccion}
                                </Typography>
                                </CardContent>
                                <CardActions disableSpacing>
                                    <IconButton aria-label="editar">
                                        <DeleteIcon />
                                    </IconButton>
                                    <IconButton aria-label="eliminar">
                                        <EditIcon />
                                    </IconButton>
                                    <IconButton
                                        className={clsx(classes.expand, {
                                            [classes.expandOpen]: expanded,
                                        })}
                                        onClick={handleExpandClick}
                                        aria-expanded={expanded}
                                        aria-label="mostrar mas"
                                    >
                                        <ExpandMoreIcon />
                                    </IconButton>
                                </CardActions>
                                <Collapse in={expanded} timeout="auto" unmountOnExit>
                                    <CardContent>
                                        <Typography paragraph>Direccion:</Typography>
                                        <Typography paragraph>
                                            {casa.direccion}
                                        </Typography>
                                        <Typography paragraph>Restricciones:</Typography>
                                        <Typography paragraph>
                                            <List>
                                                {
                                                    (casa.restricciones).map((restriccion) => (
                                                        <ListItem>
                                                            <Typography>
                                                                {restriccion}
                                                            </Typography>
                                                        </ListItem>

                                                    ))
                                                }
                                            </List>
                                        </Typography>
                                        <Typography paragraph>CupoLimite:</Typography>
                                        <Typography paragraph>
                                            {casa.cupoLimite}
                                        </Typography>
                                        <Typography paragraph>Actividades:</Typography>
                                        <List>
                                            {
                                                (casa.actividades).map((actividad) => (
                                                    <ListItem>
                                                        <Typography>
                                                            {actividad.nombre}
                                                        </Typography>
                                                    </ListItem>

                                                ))    
                                                }
                                            </List>
                                    </CardContent>
                                </Collapse>
                            </Card>
                        </Grid >
                ))}
                    </Grid>  
        </Grid>
            </Paper>
    </Grid>

Answer 1

在您当前的结构中-您有1个变量控制cards的all，而不是1个变量控制cards的each。控制卡的打开的变量（和函数）实际上属于包装元素（网格）。

相反-您应该做的是拥有一个负责1张特定卡的组件。用于控制卡状态（打开/关闭）的功能和变量位于该组件内部，这意味着每张卡（组件）具有其自己的阶段。

default CardContainer = ({casa, classes}) => {
    const [expanded, setExpanded] = useState(false);

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };
    const handleOpenModal = () => {
        setOpenModal(true);
    };
    const handleCloseModal = () => {
        setOpenModal(false);
    };

    return (
        <Card className={classes.root}>
            <CardHeader
                title={casa.nombre}
                subheader={"Apertura "+casa.horarioApertura + "- Cierre " + casa.horarioCierre}
            />
            <CardMedia
                className={classes.media}
                image={casa.foto}
                title={casa.nombre}
            />
            <CardContent>
                <Typography variant="body2" color="textSecondary" component="p">
                    {casa.direccion}
                </Typography>
            ...
            </CardContent>
        </Card>);
}

在代码中，您应该使用：

<Grid item xs={12}>
    <Grid container spacing={3}>
        {casasDeDia.map((casa) => (
            <Grid item>
                <CardContainer casa={casa} classes={classes} />
            </Grid>
        )}
    </Grid>
</Grid>