Semantic-UI Modal 让我的 Pushable Sidebar 崩溃了答案

【问题标题】：Semantic-UI Modal blows my Pushable SidebarSemantic-UI Modal 让我的 Pushable Sidebar 崩溃了
【发布时间】：2021-01-27 05:44:45
【问题描述】：

我在一个非常简单的前端使用 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

【问题讨论】：

标签： reactjs modal-dialog semantic-ui sidebar semantic-ui-react

【解决方案1】：

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

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

<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 });
    }
}

希望在找到真正的解决方案之前能有所帮助

【讨论】：

我不确定我是否理解您的解决方案。尝试复制它不成功。可以尝试根据我的创建一个沙盒来演示吗？
我不知道如何用函数组件来制作它，但是用类它看起来像这样：codesandbox.io/s/fervent-elbakyan-88r5f?file=/src/App.js 88r5f.csb.app
您的示例不起作用：侧边栏打开后我无法折叠，使用模式后侧边栏无法使用。我错过了什么吗？
它在沙箱中不起作用，但使用此链接（它适用于我）88r5f.csb.app
明白了。真的很感谢黑客和努力:)。我会看看它是否可以在我的项目中工作。

【解决方案2】：

看起来这个问题已经在 semantic-ui-react@2.0.3 ? 中得到修复。详情请见this issue。

【讨论】：

我知道 - 我打开了这个问题。还上传了带有工作示例的相同代码:)