javascript - 打开子页面(弹出页面)时如何模糊/禁用父组件?

标签 javascript reactjs

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

这是我的 fiddle 工作区 Demo

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

最佳答案

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

  1. 我们将子组件包装到一个div中,类名为overlay
  2. 应用 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

希望有帮助:)

关于javascript - 打开子页面(弹出页面)时如何模糊/禁用父组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54059078/

相关文章:

reactjs - 首先 react 加载本地存储

javascript - 使用 mongoose 查询嵌套文档

javascript - 在 foreach 循环中使用回调函数

reactjs - react-virtualized ,在哪里调用 forceUpdateGrid 更新表数据?

javascript - MediaSource 从不在 React 中发出 sourceopen 事件

reactjs - 将 PDF 上传到 Firebase 存储 - Uncaught Error : This browser doesn't seem to support creating Blobs

javascript - 在这种情况下有没有比 eval() 更好的方法?

javascript - 在Javascript中通过函数获取所有继承的属性

javascript - 为什么 '(function a() {})'不把 'a'放到全局对象中呢?

javascript - 如何在ReactJs上使轮播自动更改而不是单击带有循环的onclick