react-modal shouldCloseOnOverlayClick 不起作用答案

【问题标题】：react-modal shouldCloseOnOverlayClick not workingreact-modal shouldCloseOnOverlayClick 不起作用
【发布时间】：2017-12-31 18:09:00
【问题描述】：

我正在使用反应模态，并且单击覆盖时模态不会关闭。我为 isOpen 和 onRequestClose 都提供了 props，但模式仍然打开。

closeModal= () => {
  this.setState({ modalIsOpen: false });
};

   <Modal 
    isOpen={this.state.modalIsOpen} 
    onRequestClose={this.closeModal} 
    shouldCloseOnOverlayClick={true} 
   >
     <div>This is my Modal</div>
     <Button onClick={this.closeModal}>Close Modal<Button>
</Modal>

我知道这在过去一直是个问题。还有什么我可以尝试的吗？先感谢您。

【问题讨论】：

标签： reactjs react-modal

【解决方案1】：

此问题已在 2.2.2 版中修复。

【讨论】：

【解决方案2】：

如果你有简单的模式来使用带有反应的模态，对我来说最好的方法是从模板 index.html 插入，在我的情况下，它是公共文件夹 CDN 链接中的文件，用于引导和 jQuery，而不是为模态创建文件夹两个文件：index.js 和 modal.js。

首先是代码`import React from 'react'；从'./pomocna_modal'导入模态；

类 Modal_gl 扩展 React.Component{

 promena(){
   alert('alert');
 }

render(){

    const user={
        id: 0,
        name:"Naslov modala prvog",
        title: "Telo modala jedan",
        };

    return(
        <div>
            <button type="button" className="btn btn-primary btn-lg"
                    data-toggle="modal" data-target="#myModal" onClick={this.promena}
             ref="prvoDugme">
                Launch demo modal
            </button>
            <button type="button" className="btn btn-primary btn-lg"
                    data-toggle="modal" data-target="#myModal"
                    ref="drugoDugme">
                Drugi poziv istog modala sa promenjenim podacima
            </button>
            <MOdal titlem={this.props.title}  modalb={this.props.name} user={user}  />

        </div>
    );
}

}

导出默认的 Modal_gl；

第二个代码是

/**

* 由 trika 于 18 年 1 月 19 日创建。 */ 从“反应”导入反应；

模态类扩展 React.Component{

render() {
    console.log(this.props);
    return (

        <div className="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 className="modal-title" id="myModalLabel">{this.props.user.name}</h4>
                    </div>
                    <div className="modal-body">
                        {this.props.user.title}
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" className="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

}; 导出默认模态；

用于调用模态您必须在 html 标记之间使用引导代码从您希望调用模态的位置像这样 data-toggle="modal" data-target="#myModal"

【讨论】：

【解决方案3】：

您可以从文档中看到：

默认情况下，当点击它外部时，模式是关闭的（覆盖区域）。如果你想阻止这种行为，你可以通过 'shouldCloseOnOverlayClick' 属性为 'false' 值。

您的代码看起来不错，可能问题出在您使用的版本上，可能与 shouldCloseOnOverlayClick 属性有关。尝试不添加道具，并检查您的 react-modal 版本。

【讨论】：

不添加道具问题依旧。使用 react-modal 2.0.6
您能否为您的代码提供更多上下文？我毫不怀疑问题可能出在模块本身上，但这将有助于调试它。
Adrei 单击按钮后，模式打开。然后单击模式内的另一个按钮时，我将其关闭。此功能有效，但我无法通过简单地单击覆盖来关闭模式。我在上面添加了更多代码。
刚刚使用 react-modal v2.2.2 使用您的代码 sn-p 对此进行了测试，它工作正常。我建议您更新并重试。