React useStyles 点击时删除类名

Question

这几乎可以肯定是世界上最简单的事情，但不知何故在逃避我......

我有一个可供选择的 onClick 材质 UI 卡组件的选择，因此应该在选择它时添加一个类。出于某种原因，尽管所有示例似乎都表明应该删除该类，但该类的删除并不适用。我做错了什么？

为了简洁而删减...

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        cardSelected: {
            backgroundColor: theme.palette.action.selected
        },
    })
);


export const Occasion = (): JSX.Element => {
    const classes = useStyles();
    const [selected, setSelected] = useState<string>('');

    const handleSelect = (e: React.MouseEvent) => {
        const s = e.currentTarget.getAttribute("data-option");
        if (s) {
            setSelected(s);
        }
    }

    return (
        <Grid item xs={12} sm={6} md={3}>
            <CardActionArea className={classes.actionArea} onClick={handleSelect} data-option={occasion.id}>
                <Card className={ selected === occasion.id ? classes.cardSelected : '' }>
                    <IconRounded className={classes.iconItem} color="secondary" />
                    <Typography variant="h5" component="h3">{ occasion.name } </Typography>
                </Card>
            </CardActionArea>
        </Grid>
    );
}

```


Clicking a card correctly adds the desired class but does not remove it from the other card items?

Answer 1

您还需要清除selected。

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        cardSelected: {
            backgroundColor: theme.palette.action.selected
        },
    })
);


export const Occasion = (): JSX.Element => {
    const classes = useStyles();
    const [selected, setSelected] = useState<string>('');

    const handleSelect = (e: React.MouseEvent) => {
        const s = e.currentTarget.getAttribute("data-option");
        if (s) {
            setSelected(s);
        } else {
            setSelected('');
        }
    }

    return (
        <Grid item xs={12} sm={6} md={3}>
            <CardActionArea className={classes.actionArea} onClick={handleSelect} data-option={occasion.id}>
                <Card className={ selected === occasion.id ? classes.cardSelected : '' }>
                    <IconRounded className={classes.iconItem} color="secondary" />
                    <Typography variant="h5" component="h3">{ occasion.name } </Typography>
                </Card>
            </CardActionArea>
        </Grid>
    );
}

在当前示例中，如果 id 或 s 存在，您只是将其添加到 selected，但不会删除它。

编辑更新了切换功能。

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        cardSelected: {
            backgroundColor: theme.palette.action.selected
        },
    })
);


export const Occasion = (): JSX.Element => {
    const classes = useStyles();
    const [selected, setSelected] = useState<string>('');

    const toggleSelect = (e: React.MouseEvent) => {
        const s = e.currentTarget.getAttribute("data-option");
        if (s && !selected) {
            setSelected(s);
        } else {
            setSelected('');
        }
    }

    return (
        <Grid item xs={12} sm={6} md={3}>
            <CardActionArea className={classes.actionArea} onClick={toggleSelect} data-option={occasion.id}>
                <Card className={ selected === occasion.id ? classes.cardSelected : '' }>
                    <IconRounded className={classes.iconItem} color="secondary" />
                    <Typography variant="h5" component="h3">{ occasion.name } </Typography>
                </Card>
            </CardActionArea>
        </Grid>
    );
}