Задать вопрос
@karmyskove

Как включить события для Popper material ui?

Здравствуйте! Как включить события для Popper material ui? Натолкнулся на статью: https://question-it.com/questions/2796767/onclick-..., предлагают передать interactive, проблема в том, что такого props нету у Popper. В документации поискал, ничего похожего нету. Ниже приведу пример как делаю, в консоли ноль реакции.
<Popper
        keepMounted
        onMouseMove={() => console.log("asd")}
        open={openSubMenu}
        anchorEl={anchorSubMenuEl}
        placement="right"
        transition
      >
        {textSubMenu &&
          (({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <PopperContainer>{textSubMenu}</PopperContainer>
            </Fade>
          ))}
      </Popper>
  • Вопрос задан
  • 219 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Нетология
    Frontend-разработка на React
    10 недель
    Далее
  • Академия Eduson
    React-разработчик
    2 месяца
    Далее
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
Event Listeners
You can also have Popper automatically update the position when certain events are fired, to learn more visit the Event Listeners Modifier page.

Hook into the lifecycle
There are situations where you may need to hook into the Popper's lifecycle to perform some additional logic.

If all you need is a callback ran after Popper positioned the element the first time, you can define the onFirstUpdate property in the Popper options:
createPopper(referenceElement, popperElement, {
  onFirstUpdate: state => console.log('Popper positioned on', state.placement),
});

If, instead, you want to run some logic on each update cycle, the best way to do that is to define your own custom modifier.

If you want to make sure to run your logic after all the other modifiers have ran, we suggest to set afterWrite as your custom modifier's phase.
https://popper.js.org/docs/v2/lifecycle/#event-lis...

popperOptions - Options provided to the Popper.js instance.
https://mui.com/api/popper

Дальше всё зависит от вашей конкретной задачи.
Ответ написан
Комментировать
Все работает и без всяких танцев с бубном. https://codesandbox.io/s/laughing-jasper-q7uyd?fil...
Пример из доки материала https://v4.mui.com/ru/components/popper/#popper
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
от 250 000 до 300 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽