React. Смена класса по клику onClick

Рейтинг: 0Ответов: 2Опубликовано: 02.03.2023

Не совсем понимаю, почему не работает. Заранее спасибо за ответ!

function Menu() {
    const [Menu__item, setMenu__item] = useState(`Menu__item`)

    function handleClickBtnMenu() {
        setMenu__item(function (prevCount) {
            if (prevCount === `Menu__item`) {
                setMenu__item('Menu__item__active');
            } else if (prevCount === `Menu__item__active`) {
                setMenu__item(`Menu__item`);
            }
        })
    };


    return (
    <div className='Header__menu'>
        <nav className='Menu__body'>
            <ul className='Menu__list'>

                <li className={`${Menu__item}`}> ...}

Должен меняться класс у тега li, он меняется, но на undefined

css reactjs hook
Источник: Stack Overflow на русском

Ответы

▲ 0

Метод setMenu__item - на входе принимает аргумент в качестве функции, либо другое значение. Если Вы используете в качестве первого аргумента функцию, вам необходимо с помощью оператора return вернуть значение. В противном случае вы получите undefined.

function handleClickBtnMenu() {
    setMenu__item(prevCount => {
        if (prevCount === `Menu__item`) {
            return 'Menu__item__active';
        }
        if (prevCount === `Menu__item__active`) {
            return `Menu__item`;
        }
    })
};
▲ 0

Если вы используете callback функцию для изменения значения сосотояния, то данная функция должна вернуть это значение.

Т.к. у вас 2 значения, можно сделать вот так:

function handleClickBtnMenu() {
  setMenu__item(prevCount => prevCount === 'Menu__item' ? 'Menu__item__active' : 'Menu__item');
}

Или выполнить нужные расчеты за пределами функции изменения состояния и передать уже расчитанное значение:

function handleClickBtnMenu() {
  const styleNew = Menu__item === 'Menu__item' ? 'Menu__item__active' : 'Menu__item';
  setMenu__item(styleNew);
}