Semantic-UI Modal 打败了我的 Pushable Sidebar

Semantic-UI Modal blows my Pushable Sidebar

我在一个非常简单的前端使用 Semantic-UI-React。主页使用 Sidebar.Pushable 来显示菜单和主要内容。如果任何子组件打开 ModalSidebar 将停止反应。没有错误 - 我认为这与某些 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

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

首先,我向边栏的触发器添加了一个虚拟 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 });
    }
}

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

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