Question

我的React应用程序中有一个模式，当用户单击它时，我正在关闭模式。功能如下：

handleOutsideClick = (evt) => {
    const { handleClose } = this.props

    if(!_isNull(this.modal)) {
        if(!this.modal.contains(evt.target)) {
            handleClose()
        }
    }
}

模态div当然有ref={ node => (this.modal = node) }。现在，我在模态内部有了一个动态形式：用户添加值，它们像“芯片”一样可视化，可以将它们删除...但是这里出现了问题...如果我单击鼠标以删除某些芯片，则会将其删除因为条件!this.modal.contains(evt.target)的值为true，所以DOM和modal的值将关闭。我该如何解决这个问题？

我的模式代码在这里：

<div className={ `modal-overlay ${ open ? 'visible' : ''}` }>
    <div 
        ref={ node => (this.modal = node) }
        className={ `modal ${className ? className : ''}` }
    >
        <header>
            <h3>{ title }</h3>
            { !hideCloseButton && 
                <IconButton className="close-button" color="grey" handleClick={ handleClose }>
                    <FontAwesomeIcon icon={ ['far', 'times'] } />
                </IconButton>
            }
        </header>
        <section className="modal-body">
            { children }
        </section>
    </div>
</div>

编辑： 我试图将evt.stopPropagation()添加到deleteChip函数，但这无济于事。

Answer 1

您可以添加一个简单的背景：

<div className="modal-backdrop" onClick={this.props.handleClose}></div>

这将覆盖整个屏幕，您只需确保CSS中的z-index用于分层即可。您要确保背景位于模态主体的后面。

这是我用react-transition-group写的。对我来说就像是一种魅力:)

<Transition in={isOpen} timeout={200} unmountOnExit>
    { state => (
      <div className={cn.modalWrapper}>
        <div className={`${cn.modal} modal-${state} ${size}`}>
          <div className={cn.modalBody}>
            { title && 
              <div className={cn.modalTitle}>
                <h3>{title}</h3>
              </div>
            } 
            {children}
          </div>
        </div>
        <div className={`${cn.modalBackdrop} modal-backdrop-${state}`} onClick={() => handleClose()}></div>
      </div>
    )}
  </Transition>

模态手柄外点击

1 个答案: