1

Всем привет!))) Читала и искала решение этой ошибки, но хоть убейте - не могу найти ответ (или не пойму). Про асинхронность setState знаю. Вроде делаю все ок) Но не обновляется переменная isBurgerMenuOpened. То есть при нажатии на кнопку меню, функция burgerMenuOpen срабатывает, isBurgerMenuOpened меняется на true, а классу burger__navigation добавляется соответствующий класс. Но вот когда я нажимаю на burger__close-button, то burgerMenuClose не срабатывает. Стейт-переменная не меняется. И сообственно, класс не убирается.

Что я не так делаю?((((

function BurgerMenu() {
  const [isBurgerMenuOpened, setIsBurgerMenuOpened]  = React.useState(false);

  React.useEffect(() =>{
    console.log(isBurgerMenuOpened);

  }, [isBurgerMenuOpened] );


  function burgerMenuOpen() {
    setIsBurgerMenuOpened(true);
  }

  function burgerMenuClose() {
    setIsBurgerMenuOpened(false);
  }

  return (
    <div onClick={burgerMenuOpen} className="burger">
      <div className={`burger__navigation ${isBurgerMenuOpened && 'burger__navigation_opened'}`}>
        <div onClick={burgerMenuClose} className="burger__close-button"></div>
      </div>
    </div>
  );
}
4
  • Что за rw в burgerMenuClose?
    – Alexey Ten
    10 сен 2022 в 9:24
  • уже убрала)) то случайно было записано
    – Олеся
    10 сен 2022 в 9:30
  • Проверять лень, но событие onClick «всплывает» так что ваш клик по крестику вызывает сначала burgerMenuClose, а потом «доплывает» до внешнего div и вызывает burgerMenuOpen
    – Alexey Ten
    10 сен 2022 в 9:32
  • все, блин, поняла))))
    – Олеся
    10 сен 2022 в 9:33

1 ответ 1

1

Спасибо Alexey Ten, из-за вложенности в блоки, срабатывало сразу 2 события. Разобралась, вынесла блок burger__close-button отдельно и все заработало)))

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.