单击叠加层时反应模态未关闭

Question

我正在使用反应模态

文档提到，默认情况下，当您单击叠加层时，模式应关闭。 即使我将shouldCloseOnOverlayClick道具设置为 true，这仍然不起作用。

我不知道有什么可以阻止该事件发生的。

如果这是相关的/指示性的(而且我还没有弄清楚为什么会显示它(，我在 Chrome 开发人员工具中注意到我的模态的覆盖层和内容节点都有一个未定义的类。 我使用的所有 CSS 类都已定义并按预期工作。

这是相关的JSX和CSS，如果需要更多上下文，请告诉我。

JSX：

return (
<div className="Modal">
<Modal
className={{
base: 'Modal-content' + ' Modal-InputError-videoURL'
}}
overlayClassName={{
base: 'Modal-overlay'
}}
isOpen={true}
contentLabel="Modal"
>
{props.message}
<br />
<br />
<br />
<button
className="Modal-button"
onClick={events.handleCloseModal}
>
Close
</button>
</Modal>
</div>
)

CSS 类：

.Modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.35);
z-index: 9998;
}
.Modal-content {
display: relative;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #ccc;
background: rgb(38,38,38);
border: 1.5px solid rgb(45,45,45);
overflow: auto;
border-radius: 1px;
outline: none;
z-index: 9999;
width: 400px;
margin-left: -150px;
margin-right: -150px;
padding: 24px;
line-height: 16px;
}
.Modal-InputError-videoURL {
height: 134px;
margin-bottom: -67px;
margin-top: -67px;
}
.Modal-button {
display: inline-block;
padding: 4px;
margin: 0;
}

Answer 1

我通过使用onRequestClose解决了这个问题(根据文档(。似乎react-modal不会将isOpen存储在其本地状态中，因此我提供了一个对onRequestClose的回调，该回调更新了父组件中的state，随后作为道具传递给模态。

http://reactcommunity.org/react-modal/examples/on_request_close.html

Answer 2

isOpen 属性静态设置为 true。您应该通过将 isOpen 值保留在您的状态中来控制其值。

isOpen = {this.state.isModelOpen}

在handleCloseModal 方法中，您可以将其值设置为 false。

this.setState({isModelOpen: false})

Answer 3

我尝试在某个组件中使用模态，但单击叠加关闭不起作用。然后，我将模态移动到以前的组件父级，它开始工作。

我想这与z指数有关，但我不确定。很抱歉错过了细节。

希望对你们有帮助！