2

我正在使用反应模态，并且单击覆盖时模态不会关闭。我为 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>

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

4

3 回答 3

1

如果您有简单的模式来使用带有反应的模态，对我来说最好的方法是从模板 index.html 插入，在我的情况下，它是用于引导和 jQuery 的公共文件夹 CDN 链接中的文件，而不是为模态创建文件夹有两个文件： 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' 导入反应；

模态类扩展 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>
    );
}

}; 导出默认模态；

调用 modal 您必须在 html 标记之间使用引导代码，从您希望调用 Modal 的地方像这样 data-toggle="modal" data-target="#myModal"

于 2018-01-19T23:15:29.193 回答
1

此问题已在 2.2.2 版中修复。

于 2017-07-25T19:53:05.373 回答
0

从文档中您可以看到：

默认情况下，当在其外部（覆盖区域）单击时，模式会关闭。如果你想阻止这种行为，你可以传递带有 'false' 值的 'shouldCloseOnOverlayClick' 道具。

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

于 2017-07-25T17:12:35.370 回答