react-modal shouldCloseOnOverlayClick无法正常工作

我正在使用反应模式，并且在点击叠加层时模态不会关闭。我为isOpen和onRequestClose提供道具，但是模态仍然是开放的。react-modal shouldCloseOnOverlayClick无法正常工作

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>

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

来源

2017-07-25 l-spark

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

默认情况下，点击它（的覆盖区域）之外，当模式被关闭。如果你想防止这种行为，你可以通过'false'值传递 'shouldCloseOnOverlayClick'道具。

您的代码看起来不错，也许这个问题是您正在使用的版本，可能与shouldCloseOnOverlayClick道具的问题。尝试不添加道具，并检查你的反应模式版本。

来源

2017-07-25 17:12:35

的问题仍然存在，而不添加道具。使用react-modal 2.0.6 –

您可以为您的代码提供更多上下文吗？我毫不怀疑这个问题可能与模块本身有关，但这有助于调试它。 –

Adrei点击一个按钮后，打开模式。然后点击模式中的另一个按钮，我将其称为关闭。此功能可以正常工作，但我无法通过单击覆盖图来关闭模式。我在上面添加了更多我的代码。 –

此问题在版本2.2.2中修复。

来源

2017-07-25 19:53:05

如果你有简单的方式使用模态反应，对我来说最好的就是插入模板index.html在我的情况下它是公共文件夹CDN链接bootstrap和jQuery，创建两个文件：index.js和modal.js。

首先是代码'import'从'react'反应; 从'./ pomocna_modal'导入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。 */ import从'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> 
    ); 
}

}; 导出默认模态;

调用模态必须使用HTML标签之间的引导代码在你想要调用莫代尔这样数据切换=“莫代尔”数据目标=“＃myModal”

来源

2018-01-19 23:15:29

react-modal shouldCloseOnOverlayClick无法正常工作

回答

相关问题