在外面单击时是否关闭模态？

Question

我有一个模态框，里面有几个按钮。 在外部单击时，我希望该模式关闭。 我已将ref添加到父元素，并且工作正常，当您单击外部时，所有内容都会关闭。 但是，如果您单击该模式框内的按钮，它也会关闭。 如何检测此ref中的子元素并不允许关闭模式框？

public handleClickoutside() {
this.props.showMessage()
}

public handleClick = (e) => {
if (this.DOMArrowBox.current !== e.target) {
  this.handleClickoutside()
}
}

public componentWillMount() {
document.addEventListener("mousedown", this.handleClick, false)
}

public componentWillUnmount() {
document.removeEventListener("mousedown", this.handleClick, false)
}

<div className={this.props.className} ref={this.DOMArrowBox}>
    <Social />
    <CallMe className="arrow__box-button" open={this.props.open} />
    <Close
      className="arrow-button_close"
      onClick={this.props.showMessage}
    />
  </div>

Answer 1

您也可以在模式内部的Button上添加引用，并检查目标元素是否包含在其中

    public handleClickoutside() {
       this.props.showMessage()
    }

    public handleClick = (e) => {

        if (!this.DOMArrowBox.current.contains(e.target) && !ReactDOM.findDOMNode(this.btnRef.current).contains(e.target)) {
          this.handleClickoutside()
        }

    }

    public componentWillMount() {
        document.addEventListener("mousedown", this.handleClick, false)
    }

    public componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClick, false)
    }

    <div className={this.props.className} ref={this.DOMArrowBox}>
        <Social />
        <CallMe className="arrow__box-button" ref={this.btnRef}open={this.props.open} />
        <Close
          className="arrow-button_close"
          onClick={this.props.showMessage}
        />
     </div>

Answer 2

我认为解决此问题的最佳方法是还原问题：假设您不是在模态之外捕获了单击，而是在模态背景包装器上单击了 。

您应该将<Modal> <Wrapper>到不可见的<Wrapper> ，其z-index值要小于模式的z-index，并采用以下样式，以使父元素/窗口具有完整的宽度和高度：

.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; // has to be < of Modal's z-index
    width: 100%; // or 100vw
    height: 100%; // or 100vh
}

然后，将ref附加到<Wrapper>并在您的handleClick方法中，将!==替换为=== （因为请记住，我们恢复了问题）。

希望对您有所帮助。

Answer 3

使用onBlur事件处理clickoutside。 请通过工作示例查看此答案 。