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無法正常工作

回答

相關問題