打开子页面（弹出页面）时如何模糊/禁用父组件？答案

【问题标题】：How to blur/disable parent component when child page (popup page) is opened?打开子页面（弹出页面）时如何模糊/禁用父组件？
【发布时间】：2019-01-06 06:04:55
【问题描述】：

我正在使用 React。我想知道打开子页面（弹出页面）时如何模糊父组件的最简单方法。

这是我的小提琴工作区Demo

即使我模糊它，父级仍然应该是可点击的谁能展示如何实现此功能？

【问题讨论】：

如果你把它弄模糊了，你还希望它是可点击的吗？
@yourfavoritedev 是的，即使我模糊它也应该是可点击的
@yourfavoritedev 是的，即使我模糊了它，它也应该是可点击的，你能告诉我如何在点击父项的模糊区域时让孩子关闭

标签： javascript reactjs

【解决方案1】：

我们可以使用 CSS 来模糊父组件。像这样的：

我们将子组件包装成一个类名为overlay的div
应用 CSS 效果来模糊父组件

[注意：您也可以通过将事件添加到overlay div 来将点击事件添加到模糊区域]

{this.state.childOpen && (
  <div className="overlay">
    <div className="overlay-opacity" />
    <Child data={data} applyFilter={this.applyFilter} />
  </div>
)}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.overlay-opacity {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
}

这里是直播demo

要隐藏模糊区域的子组件onclick，我们可以像这样添加一个事件

hideChild() {
  this.setState({
    childOpen: false
  });
}

这里是直播demo

希望对你有帮助:)

【讨论】：

现在可以了。但即使我模糊它，它也应该是可点击的。截至目前，当孩子打开时它的父母是模糊的，但父母不再是可点击的。
你能告诉我一件事 - 当父母的模糊区域被点击时如何让孩子关闭。
将您标记为正确。只有一件事——你能解释一下这两个类的要求吗——overlay和.overlay-opacity。为什么你使用了 2 个类？
@tommy123 overlay 只是为了包装chid 组件和overlay-opacity div。 overlay-opacity div 用于模糊效果并处理单击事件以在单击时隐藏子组件。

【解决方案2】：

由于您正在研究 React，我建议您使用 react-responsive-modal 库。您可以使用 npm 安装它。它可以通过道具轻松定制。请在下面找到示例： https://codesandbox.io/s/9jxp669j2o

【讨论】：

【解决方案3】：

我的理解是当孩子打开时你想模糊桌子这是您需要添加的代码

formatStyle = () => {
  if (this.state.childOpen == true) return { filter: "blur(5px)" };
   else return {};
};
//add formatStyle in main app
styleData={this.formatStyle()}  // in props on table
style = {this.props.styleData} //add this attribute in main container of table component
styleData={this.formatStyle()} // Pass this in ReactTable in main app

【讨论】：

你能不能在codeSandbox中显示，还有一个要求——当父的模糊区域被点击时如何让子关闭
添加包含反应表的完整项目
满足该要求onClick={this.closeChild} onClick = () => {this.setState({childOpen:false})}

【解决方案4】：

您正在寻找的功能已经在 Semantic-UI-React Modal 中。这很容易使用，你只需要传递一些道具就可以得到上面的结果。

演示https://react.semantic-ui.com/modules/modal/#variations-dimmer

【讨论】：