Как убрать CSS класс при клике не на кнопки и меню? React

Question

Подскажите пожалуйста как правильно написать код, когда при клике вне области навигации и button убирать класс CSS?

Answer 1

Быстрый набросок:

const YourComponent = () => {
  const buttonRef = useRef()
  const [hasClass, setHasClass] = useState(true)

  const handleClick = event => {
    if (event.target !== buttonRef.current) {
      setHasClass(false)
    }
  }

  useEffect(() => {
    window.addEventListener("click", handleClick)
    return () => {
      window.removeEventListener("click", handleClick)
    }
  }, [])

  return (
    <div className={hasClass ? "add-color" : ""}>
      <button ref={buttonRef}>Навигация</button>
    </div>  
  )
}

.add-color {
  background-color: red;
}

Данный вариант удалит класс .add-color при клике, если он придется не на кнопку. Можно оттолкнуться от данного "базового" примера и реализовать нужную Вам логику.

БЛОГ НА HUSL

Как убрать CSS класс при клике не на кнопки и меню? React

Ответы (1 шт):