OnMouseLeave для Popover с параметром hiderBackdrop (материальный пользовательский интерфейс)
<Popover
key = {element.name}
className = {classes.popover}
classes = {{
paper: classes.paper
}}
open = {open}
anchorEl = {this.myRef.current}
anchorOrigin = {{
vertical: 'bottom',
horizontal: 'left'
}}
transformOrigin = {{
vertical: 'top',
horizontal: 'left'
}}
disableRestoreFocus
hideBackdrop
>
У меня есть такое всплывающее окно, я хочу выполнить событие onMouseLeave, но оно не работает. Как я могу это решить? Это происходит потому, что я думаю, что из этого элемента нет другого html-элемента, и это причина того, что он не выполняет никаких действий. Может есть решение этой проблемы?
Вот ссылка на документ - https://material-ui.com/utils/popover/
Ответы 3
Я не слишком уверен в том, что вы пытаетесь выполнить, но Popover Material-UI имеет функцию onExit, которая эквивалентна onMouseLeave.
Может быть, вы можете сделать что-то вроде этого,
<Popover
key = {element.name}
className = {classes.popover}
classes = {{
paper: classes.paper
}}
open = {open}
anchorEl = {this.myRef.current}
anchorOrigin = {{
vertical: 'bottom',
horizontal: 'left'
}}
transformOrigin = {{
vertical: 'top',
horizontal: 'left'
}}
disableRestoreFocus
hideBackdrop
onExit = {() => {
PLACE YOUR CODE HERE TO EXECUTE!!!!!
}}
>
Дайте мне знать, если это будет полезно.
да, я тоже пробовал, но я думаю, что это будет работать только в том случае, если фон не будет скрыт
Попробуйте onMouseLeave для PaperProps = {{onMouseLeave: onClose}}
Все события публикуются здесь: reactjs.org/docs/handling-events.html это просто.
Это сработало как шарм. Проблема с onMouseLeave с компонентом popover заключается в том, что он похож на модальный и имеет фон, который занимает весь экран, поэтому мышь никогда не уходит. Передача реквизита в PaperProps имеет смысл.
У меня была такая же проблема, и их пример не помогает.
Вам нужно отключить события указателя:
<Popover
style = {{ pointerEvents: 'none'}}
disableRestoreFocus
...
>
...
Или, что еще лучше, использовать компонент Поппера, по-видимому.
что вы пытаетесь выполнить с помощью события onMouseLeave?