最佳答案
我们可以使用CSS来模糊父组件。像这样的事情:
- 我们将子组件包装到一个div中,类名为
overlay
- 应用 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/