Semantic-UI Modal 打败了我的 Pushable Sidebar

Question

我在一个非常简单的前端使用 Semantic-UI-React。主页使用 Sidebar.Pushable 来显示菜单和主要内容。如果任何子组件打开 Modal，Sidebar 将停止反应。没有错误 - 我认为这与某些 CSS 在某种程度上不可逆转地改变有关。在应用程序中的任何位置打开 Modal 后，使 Sidebar 再次可推送的唯一方法是重新加载页面。

我尽了最大的努力去钻CSS，但我还是想念它。有 an ancient issue on Github，处理语义中的类似行为-ui 本身（即不涉及 React），但没有决定性的解决方案。

要重新创建，只需 use the code from the Sidebar example，并在 Pusher 中添加一个打开模态框的按钮。一旦 Modal 打开，Sidebar 就死了。

我创建了一个 Sandbox sample。

更新：打开了一个 Github 问题：https://github.com/Semantic-Org/Semantic-UI-React/issues/4110

Answer 1

我遇到了同样的问题并找到了解决方法。

首先，我向边栏的触发器添加了一个虚拟 className。然后在 onHide 句柄中我检查目标，如果它是 class 我不设置状态。

<Button size='huge' className="NoClose" icon style={{marginTop: '1em'}}
    onClick={this.setVisible}><Icon className="NoClose" name='list' /> Menu</Button>

handleOnHide = (e, data) => {
    if(!e.target.classList.contains('NoClose')){
        this.setState({ visible: !this.state.visible });
    }
}

希望它能有所帮助，直到找到真正的解决方法

Answer 2

看起来这已在 semantic-ui-react@2.0.3 中修复。有关详细信息，请参阅 this issue。

Semantic-UI Modal 打败了我的 Pushable Sidebar

Semantic-UI Modal blows my Pushable Sidebar

reactjs

modal-dialog

semantic-ui

sidebar

semantic-ui-react