【问题标题】:Material-UI - Is there a way to allow right click to close Modal?Material-UI - 有没有办法允许右键单击关闭模态?
【发布时间】:2023-03-11 04:24:01
【问题描述】:

我希望能够通过右键单击关闭Menu(或者更具体地说,Popover),任何mousedown 事件要清楚。

我在文档中找到了这个:https://material-ui.com/components/menus/#MenuListComposition.js

然后我清理了一下。这是我所拥有的:https://codesandbox.io/s/material-ui-react-8nqqb?fontsize=14&hidenavigation=1&theme=dark

如果您检查它,您可以看到Popper 在右键单击时关闭,但现在我可以在菜单打开时滚动页面:/

这几乎是我需要的,但我无法对 Popover 做同样的事情,因为它在内部使用 Modal,而且似乎他们不使用 ClickAwayListener 或者他们不公开修改其道具的方法。

因此,如果有人知道如何使 mousedown 事件关闭 Popover 或在 Popper 打开时阻止滚动,我将非常乐意听到任何解决方案。

提前致谢。

编辑:

感谢this answer,我得到了一个方向,我调整了给定的沙箱,并设法做我想做的事。我终于不得不使用Popper 并在它打开时阻止滚动。

这是最终的沙盒链接:https://codesandbox.io/embed/material-ui-react-1qroy?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    这是一种在弹出器打开时禁用滚动的方法。

        window.onscroll = open ? null : () => window.scrollTo(0, 0);
    

    https://codesandbox.io/s/material-ui-react-zysue

    这里是 popover 而不是 popper 的相同示例

    https://codesandbox.io/s/material-ui-react-n0bf9

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-09-24
      • 2021-09-01
      • 2011-10-24
      • 2021-08-28
      • 1970-01-01
      • 1970-01-01
      • 2020-03-25
      • 1970-01-01
      相关资源
      最近更新 更多