Question

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

这是我的小提琴工作区Demo

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

Answer 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

要在模糊区域单击时隐藏子组件，我们可以添加一个这样的事件

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

这是现场demo

希望它会有所帮助：）

Answer 2

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

Answer 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

Answer 4

您正在寻找的功能已经在语义UI反应模态中。这非常易于使用，您只需传递一些道具即可获得高于结果的结果。

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

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

4 个答案: