reactjs - Material-ui 弹出状态弹出框不工作
问题描述
我使用material-ui-popup-state
包在我的标题上添加自定义菜单。我使用的代码类似于文档中的代码。区别仅在于弹出框的内容。我的内容中有一些卡片和一些背景样式。我的标题中有两个这样的弹出窗口,每个都有自己的触发器。
问题是弹出框不会始终按预期运行,并在用户将鼠标悬停在弹出框的内容上时关闭。行为不一致并且是间歇性的。我观察到的一种模式是,当一个弹出框的内容从一个弹出框的内容移动到触发另一个弹出框的按钮时,这种情况最常发生。
这是一个已知问题,是否有任何解决方法?
解决方案
我自己解决了这个问题。为任何寻找答案的人发帖。
<PopupStateController variant="popover" popupId={"label1"}>
{(popupState) => {
return popupState.isOpen ?
<>
{
<Box key={1} {...bindHover(popupState)}>
{dispBox}
</Box>
}
<HoverPopover
TransitionComponent={Grow}
key={2}
{...bindPopover(popupState)}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
PaperProps={{
square: true
}}
TransitionProps={{ timeout: { enter: 500 } }}
elevation={1}
>
{popupContent}
</HoverPopover>
</>: null
);
}}
</PopupStateController>
我不确定为什么会这样,但它解决了我的问题。我的猜测是,它<HoverPopover />
通过在未打开时从树中删除元素来防止多个 s 相互干扰。
推荐阅读
- javascript - 如何向 React-Select 添加更多可搜索选项?
- php - Codeigniter - 像查询不使用搜索字符串
- javascript - 获取 URL 的最后两个参数 - javascript
- xamarin - 属性绑定中的跨度文本绑定错误
- regex - Python正则表达式抛出AttributeError:'NoneType'对象没有属性'group'
- python - Raspberry Pi:“ValueError:无法解码任何 JSON 对象”
- java - 单击图像视图时开始新视频
- python - 将字符串格式化为仅在 python 中的单词之间有 n 个空格
- windows - 搜索文件并更改为另一个
- kubernetes - 注册来自 cloud-proactive-comms 的通知电子邮件