点击遮罩层时，react-modal未关闭

Question

我正在使用react-modal

文档中提到默认情况下，当单击遮罩时模态框应该关闭。即使我将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;
}

- LightBlue

Answer 1

我使用了文档中提到的 onRequestClose 来解决这个问题。似乎 react-modal 没有将 isOpen 存储在本地状态中，因此我提供了一个回调函数给 onRequestClose，用来更新父组件中的 state，随后将其作为属性传递给模态框。

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

- Brad Azevedo

Answer 2

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

isOpen = {this.state.isModelOpen}

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

this.setState({isModelOpen: false})

- tugce

---

即使我在状态中设置了isOpen，当我单击叠加层时，模态框仍无法关闭： <Modal isOpen={this.state.ModalIsOpen} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true} > - l-spark

你能同时发布closeModal方法吗？ - tugce

是的，@tugce，你可以在这里查看我的代码： https://stackoverflow.com/questions/45309673/react-modal-shouldcloseonoverlayclick-not-working - l-spark

Answer 3

我尝试在某个组件中使用模态框，但是点击叠加层关闭功能无法正常工作。然后，我将模态框移到了上一个组件的父级，它就能够正常工作了。

我猜测这与z-index有关，但我不确定。对于缺失的细节，我很抱歉。

希望这可以帮到你们！

- Joe Lopes