问题标签 [react-popper]

我正在使用react-popup. 当我想访问它不起作用的更新状态值时遇到问题。意思是，如果状态改变，它不会渲染 UI。当我关闭弹出表单然后我再次单击然后 UI 被反映。我想如果状态发生变化，那么我想立即重新渲染 UI，我不想形成关闭并重新打开以进行新的更改。

我正在使用这个库： http: //minutemailer.github.io/react-popup/

完整组件代码：https ://jsfiddle.net/m4fwvxk2/

代码

如您所见，我正在尝试根据更新值访问this.state.isCustomer更新值，我想设置一些条件，但我无法实现我的目标，请有人帮我解决这个问题。

我在我的项目中使用反应材料和popper组件。我正在尝试测试popper与单元测试一起使用的组件。

这是组件中的方法：

这是我使用 popper 的渲染部分：

我试图这样测试：

但是，然后我得到错误：

错误：失败：“错误：未捕获 [TypeError：无法设置未定义的属性“转换”]

如何模拟 popper 或修复此问题以便进行此测试工作？

我有一个 Vue 水疗中心。我希望根据官方文档https://codepen.io/FezVrasta/pen/yWGrOZ中的这个 codepen 实现 popper.js 弹出窗口 。我似乎无法将“pop”元素定位在“ref”的右侧。“pop” div 显示在“ref” div 下。我需要在 Vue 中做什么才能让 Popper 将位置放在“ref”的右侧？

我安装并导入了 popper.js

设置我的 HTML

安装组件后，我启动 Popper。

新手到这里，温柔点。

我正在使用 react-popper 和 react router-dom。

我有一个顶部导航组件，如果您将鼠标悬停在菜单项上，则会出现子导航项（它们是链接）。如果发生单击事件，我希望能够单击主菜单项并重定向用户。但是对于触摸事件，我希望他们能够扩展子导航选项，而不是立即重定向。

我该怎么办？我只需要创建一个重定向的handleClickEvent 吗？

我正在尝试使用 react-popper 和 react-router-dom 创建一个顶部导航菜单。

沿着顶部导航，我有 MenuItems，当悬停在或点击触摸屏时，会使用弹出器组件展开以显示子导航项。您只能通过子导航项被重定向到另一个页面。这就是它的当前状态

我想要实现的是鼠标用户能够通过 MenuItem 本身立即重定向，如果他们愿意的话。但是由于手机/平板电脑用户没有那种悬停状态，我希望他们不要从 MenuItem 重定向并且仍然只是展开子导航选项。

我决定尝试使用 event.stopPropagation() 来分离这两个事件处理程序。但是嵌套 div 上的 onTouchStart 事件仍在冒泡并触发 click 事件。

我也试过

正如有人所说，事件已经从文档中冒出并绕过任何其他 stopPropagate()，但那里也没有运气。

当我npm update为现有的 React 项目放置命令时，会显示：

似乎不可能将<Tooltip>触发锚元素放在“顶部”（堆叠/分层）。

它总是出现在父级之外，"placement"用来决定在哪里。我相信是 Popper 中的Flip工具管理放置并确保可见性。我尝试通过 Popper 选项修饰符来禁用翻转，并调整偏移量。一些建议是跳过防止溢出，并禁用 GPU 加速。为了实现这一点，我陷入了 MaterialUI 内部的兔子洞。我评论了看似不太可能的过度杀伤解决方案。

MUI 之外的示例：react-tooltip （包括指针跟踪，超出此问题）。

我正在开发一个日历应用程序。

问题：单击 popper 的 popper 会关闭两个 popper，因为它会触发关闭它的第一个 popper 的 click outside 事件。

我有一个<Event />使用 Material-UI React的组件，<Popper />它可以正常工作。将其与<AwayClickListener />单击外部时关闭，单击弹出器内部时保持打开状态相结合。我创建<Events />了一个列表<Event />。

单击 + 更多文本时，应在单元格顶部显示包含当天所有事件的弹出器。

波普尔儿童也是<Events />：

单击一个事件应该会打开一个带有事件详细信息的弹出器，就像在单元格中单击它一样。因为我使用了相同的组件<Events />，但并不完全符合预期：

单击事件详细信息弹出器会关闭两个弹出器。

这就是问题所在：要求是单击弹出器的外侧将关闭弹出器，但单击内部将使它们保持打开和交互

调试显示单击第二个 popper 会触发第一个 popper 的外部单击事件，从而将其关闭。此外，从第一个 popper 中取出 click away 侦听器功能，让第二个 popper 在大多数点击中保持打开状态 - 单击其中的某些位置，会触发它的 clicked away 功能，从而将其关闭。例如：单击标题将其关闭，单击位置或摘要 div 不会。

1. 我尝试用<ClickAwayListener />.
2. 我试着用<ClickAwayListener />
3. 尝试使用 material-ui-popup-state npm，并提供 popper id 属性。比点击离开时，将目标 ID 与“popper”进行比较，如果相等则保持打开状态。但是，从 onClickAway 事件的事件对象中提取的 id 是空字符串。即使单击弹出器。

代码

<Popper>- 材料 ui popper 的服装包装

<Event />

<Events />

<MonthlyCell />

希望它足够清楚。让我知道是否需要其他任何东西。谢谢

编辑 1

另一种尝试是给父 popper 更大的 z-index，但它没有用

我有一个菜单组件，它使用 popperjs 来显示弹出菜单。第一次单击按钮时，弹出窗口出现在屏幕的左上角，而不是按钮下方。我已经使用反应门户来放置渲染的菜单。

当我使用useState钩子捕获 popper 和引用元素的引用时，问题得到解决（如react-popper示例中所建议的那样）。但是我已经实现了一个 clickaway 钩子来隐藏弹出窗口，当你点击弹出窗口以外的任何地方时，我需要使用useRef. 然后我做usePopper(refElem.current, popperElem.current)。我在这里重现了这个问题

我在 React 中构建了一个自定义树视图，每个项目都包含一个使用 Popper 定位的下拉列表。由于子元素在渲染时不可见，因此 Popper 未正确定位下拉列表，例如：

当树在 mount 上打开时（即孩子们是可见的），定位是正确的：

树中的每个级别都通过一个组件呈现CategoryNavItem，它基本上看起来像这样：

该Dropdown组件是我们使用 Popper 的地方，它在其他任何地方都可以正常工作。a 的可见性CategoryNavItem是通过组件在 React 中的状态来处理的。

有没有办法update()在 React 中以编程方式触发 Popper 的方法？我们应该update在切换项目的可见性时强制。