Semantic-UI Modal 打败了我的 Pushable Sidebar
Semantic-UI Modal blows my Pushable Sidebar
我在一个非常简单的前端使用 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
我遇到了同样的问题并找到了解决方法。
首先,我向边栏的触发器添加了一个虚拟 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。
我在一个非常简单的前端使用 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
我遇到了同样的问题并找到了解决方法。
首先,我向边栏的触发器添加了一个虚拟 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。