Есть ли другой способ скрыть выпадающее меню при нажатии снаружи?

Итак, я создаю раскрывающееся меню в React, и если я щелкну за пределами раскрывающегося меню, оно должно закрыться. Для этого я в настоящее время использую прослушиватели событий click. Есть ли другой способ, который можно использовать вместо прослушивания событий? Я пробовал с onFocus и onBlur, но это не работает.

Вот фрагмент кода:

const [showMenu, setShowMenu] = useState(false);
const dropdownRef = useRef(null);

useEffect(() => {
    //hiding the dropdown if clicked outside
    const pageClickEvent = (e: { target: unknown }) => {
      if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {
        setShowMenu(!showMenu);
      }
    };

    //if the dropdown is active then listens for click
    if (showMenu) {
      document.addEventListener("click", pageClickEvent);
    }

    //unsetting the listener
    return () => {
      document.removeEventListener("click", pageClickEvent);
    };
}, [showMenu]);

<Button onClick = {() => setShowMenu(!showMenu)} />
{showMenu ? (
     <div className="dropdown-content" ref={dropdownRef} >
        <a>
        ...
        <a>
      </div>
    ) : null}

Код, который у вас есть, является общепринятым и устоявшимся шаблоном. Вы столкнулись с проблемой некоторый?

Drew Reese 17.05.2022 00:53

Неа. Это прекрасно работает. Но написание модульных тестов для этого кажется немного сложным. Итак, хотел узнать, есть ли какой-либо другой альтернативный подход.

Saravanan Manoharan 17.05.2022 01:07
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
2
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, есть. Используйте оверлей под меню.

function MyComponent() {
  const [menuVisible, setMenuVisible] = useState(false);
  
  
  return (
    <div>
    
      <button className='dropdown-button' onClick={() => setMenuVisible(true)}>Click me</button>
      
      {menuVisible ? (
        <ul className='dropdown-menu'>
          {/* items go here */ }
        </ul>
      ) : null}
      
      {/* now the important part */}
      
      {menuVisible ? (<div className='overlay' onClick={() => setMenuVisible(false)} />) : null}
    
    </div>
  
  )
}

CSS

.overlay {
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: rgba(0, 0, 0, 0.01);
}

Это блестяще! Спасибо! Примечание. Вам нужно добавить z-index для раскрывающегося списка, чтобы сделать его доступным для кликов.

Saravanan Manoharan 17.05.2022 07:23

@SaravananManoharan это правильно, или визуализируйте его перед меню.

Silviu-Marian 17.05.2022 09:59

Другие вопросы по теме