点击覆盖

说明文档中提到，当你默认点击叠加模态应该关闭反应模态不打烊。即使我将shouldCloseOnOverlayClick支柱设置为true，这仍然不起作用。

我不知道任何可能阻止该事件的发生。

如果这是相关/指示任何事情（我还没有弄清楚为什么会出现这种情况），我注意到在Chrome开发者工具中，我的模式的覆盖和内容节点都有一个未定义的类。我所使用的所有CSS类都是应该定义和工作的。

下面是相关的JSX和CSS，请让我知道是否需要更多的上下文。

JSX：

return (
    <div className="Modal"> 
     <Modal 
      className={{ 
       base: 'Modal-content' + ' Modal-InputError-videoURL' 
      }} 
      overlayClassName={{ 
       base: 'Modal-overlay' 
      }} 
      isOpen={true} 
      contentLabel="Modal" 
     > 
      {props.message} 
      <br /> 
      <br /> 
      <br /> 
      <button 
       className="Modal-button" 
       onClick={events.handleCloseModal} 
      > 
       Close 
      </button> 
     </Modal> 
    </div> 
)

CSS类：

.Modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.35); 
    z-index: 9998; 
} 

.Modal-content { 
    display: relative; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    border: 1px solid #ccc; 
    background: rgb(38,38,38); 
    border: 1.5px solid rgb(45,45,45); 
    overflow: auto; 
    border-radius: 1px; 
    outline: none; 
    z-index: 9999; 
    width: 400px; 
    margin-left: -150px; 
    margin-right: -150px; 
    padding: 24px; 
    line-height: 16px; 
} 

.Modal-InputError-videoURL { 
    height: 134px; 
    margin-bottom: -67px; 
    margin-top: -67px; 
} 

.Modal-button { 
    display: inline-block; 
    padding: 4px; 
    margin: 0; 
}

来源

2017-07-22 LightBlue

IsOpen属性静态设置为true。您应该通过在您的状态下保持isOpen值来控制它的价值。

isOpen = {this.state.isModelOpen}

而在handleCloseModal方法中，您可以将它的值设置为false。

this.setState({isModelOpen: false})

来源

2017-07-22 19:51:24 tugce

即使当我在状态设定ISOPEN，模态仍然无法关闭，当我点击重叠： <模态 ISOPEN = {this.state.ModalIsOpen} onRequestClose = {this.closeModal} shouldCloseOnOverlayClick = {true} > –

您也可以发布closeModal方法吗？ – tugce

是@tugce你可以在这里查看我的代码： https://stackoverflow.com/questions/45309673/react-modal-shouldcloseonoverlayclick-not-working –

回答

相关问题