Reactjs react模态应关闭Overlay单击“不工作”

我使用的是react模式，单击覆盖后模式将不会关闭。我为isOpen和onRequestClose提供了道具，但是模态仍然是开放的

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>

closeModal=（）=>{
this.setState（{modalIsOpen:false}）；
};
这是我的情态
闭合模态

---

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

从文档中可以看到：

默认情况下，当在模态外部单击时，该模态将关闭（该 覆盖区域）。如果要防止这种行为，可以通过 “shouldCloseOnOverlayClick”道具的值为“false”

---

您的代码看起来不错，可能是您使用的版本有问题，可能是shouldCloseOnOverlay单击道具有问题。尝试不添加道具，同时检查您的反应模式版本。

此问题在版本2.2.2中已修复

如果你有简单的模式，可以通过react使用modal，那么对我来说最好的办法就是从template index.html插入，在我的例子中，它是公共文件夹中的文件，用于引导和jQuery的CDN链接，而不是用于modal的make文件夹，它有两个文件：index.js和modal.js

首先是代码“import React from'React”； 从“/pomocna_model”导入模式

类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>
    );
}

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>
    );
}

*特里卡于2018年1月19日创作。 */ 从“React”导入React

类Modal扩展了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>
    );
}

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>
    );
}

render（）{
console.log（this.props）；
返回(
&时代；
{this.props.user.name}
{this.props.user.title}
接近
保存更改
);
}

})； 导出默认模式

---

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

在不添加道具的情况下，问题仍然存在。使用react-modal 2.0.6，您能为代码提供更多的上下文吗？毫无疑问，问题可能出在模块本身，但这将有助于调试它。单击一个按钮，打开模式。然后单击模式内的另一个按钮，我调用它关闭。此功能这是可行的，但我无法通过简单地单击覆盖来关闭模式。我在上面添加了更多代码。刚刚使用react-modal v2.2.2对您的代码段进行了测试，结果成功了。我建议您更新并重试。