首页 文章

单击叠加层时，react-modal未关闭

提问于
浏览 次
1

我正在使用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}
            

            

            

            <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;
}
reactjs modal-dialog react-modal

2 回答

  • 2

    isOpen属性静态设置为true . 您应该通过在您的州中保持isOpen值来控制它的值 .

    isOpen = {this.state.isModelOpen}

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

    this.setState({isModelOpen: false})
    回复于
  • 0

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

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

    回复于

相关问题