Блог

Главная - Вопросы по программированию - Реагируйте на стили использования, Удаляйте имя класса по щелчку

Реагируйте на стили использования, Удаляйте имя класса по щелчку

#reactjs #state #jss

Вопрос:

Это почти наверняка самая легкая вещь в мире, но она каким-то образом ускользает от меня….

У меня есть выбор компонентов карты material-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?

Комментарии:

1. Откуда берется occasion переменная? Я не вижу, чтобы это где-то определялось.

2. Из этого я заключаю, что вы сопоставляете массив и создаете несколько элементов события? Если это так, вам следует сохранить, какой из них активен выше в дереве компонентов, предпочтительно внутри компонента, в котором вы сопоставляете свой массив.

Ответ №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>
    );
}

В текущем примере вы просто добавляете его в selected «если id » или s «существует», но не удаляете.

РЕДАКТИРОВАНИЕ Обновлено с помощью функции переключения.

 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 amp;amp; !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>
    );
}

Комментарии:

1. Кстати, пример не является полным. Где мы получаем occasion данные об объекте?

2. Я уже пробовал это. Очистите его перед установкой, это не имеет значения

3. Ах! Вам нужна функция переключения. Если выбранное значение уже существует, вам нужно его очистить! Обновил пример. Проверьте часть редактирования.

4. Работает ли обновленное решение?

5. Спасибо, но проблема остается! Все элементы, похоже, сохраняют «выбранный» стиль даже при применении версии переключения. Чтобы быть ясным, на странице есть несколько карточек, это компонент, который отображается x много раз… так что только один из них должен быть когда-либо выбран.

Метки: ,