react-modal不工作

Question

我使用的是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>

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

Answer 1

此问题已在版本2.2.2中修复。

Answer 2

如果你有简单的模式使用模式与反应，对我来说最好的方式是插入从模板index.html在我的情况下，它是文件在公共文件夹CDN链接的引导和jQuery，然后制作文件夹为模态有两个文件: index.js和modal.js。

首先是代码‘import React from 'react'；import MOdal from’./pomocna_ code‘；

类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日至18日创建。*/从‘React’导入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标记之间使用引导代码，就像这样切换data-=“Modal”data-target="#myModal"

Answer 3

从文档中，您可以看到：

默认情况下，当在模式外部(覆盖区域)单击时，模式处于关闭状态。如果你想防止这种行为，你可以用'false‘值传递'shouldCloseOnOverlayClick’属性。

你的代码看起来很好，可能是你使用的版本有问题，可能是shouldCloseOnOverlayClick prop有问题。试着不添加道具，也检查你的react-modal版本。