反应模态shouldCloseOnOverlayClick不工作(react-modal shoul

我使用的反应模式，和模态不会关闭在点击叠加。我公司提供的道具都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>

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

Answer 1:

如果你有简易模式使用模式有反应，对我来说是最好的离开从模板的index.html插入我的情况下，它是在引导和jQuery，比新建文件夹模态有做两个文件公用文件夹CDN链接文件： index.js和modal.js。

在第一代码是`进口从阵营“反应”; 进口模态，从“./ 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 19-JAN-18。 * /进口从阵营“反应”;

类模态延伸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标签之间的引导代码=“莫代尔”数据目标=“＃myModal”

Answer 2:

从文档，你可以看到这一点：