Question

我使用的是反应模式，点击叠加后模态不会关闭。我为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

如果你有简单的模式使用modal with react，对我来说最好的是从模板index.html插入在我的情况下它是公共文件夹中的文件CDN链接用于bootstrap和jQuery而不是make modal那里做的文件夹两个文件：index.js和modal.js。

首先是代码`import React from＆＃39; react＆＃39 ;; 从＆＃39; ./ pomocna_modal＆＃39;;

导入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于1月19日创建。 * / import来自＆＃39; react＆＃39;;

的反应

类Modal扩展了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标签之间使用bootstrap代码，你希望调用Modal这样的 data-toggle =＆＃34; modal＆＃34;数据目标=＆＃34;＃myModal＆＃34;

Answer 2

从文档中你可以看到：

默认情况下，在点击模式外部时会关闭模态（覆盖区域）。如果你想防止这种行为，你可以通过＆＃39; shouldCloseOnOverlayClick＆＃39;支持＆＃39; false＆＃39;值。

您的代码看起来很好，可能问题在于您使用的版本，可能与 shouldCloseOnOverlayClick 道具有问题。尝试不添加道具，并检查您的反应模式版本。

Answer 3

第2.2.2节修正了这个问题。

react-modal shouldCloseOnOverlayClick不工作

3 个答案: