模态手柄外点击

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和模式会关闭。 我怎么解决这个问题？

我的模态代码在这里：

<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>