Javascript 单击“外部”时关闭模式？

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

public handleClickoutside（）{
this.props.showMessage（）
}
公共handleClick=（e）=>{
if（this.DOMArrowBox.current！==e.target）{
this.handleClickoutside（）
}
}
公共组件willmount（）{
document.addEventListener（“mousedown”，this.handleClick，false）
}
公共组件将卸载（）{
document.removeEventListener（“mousedown”，this.handleClick，false）
}

您也可以在modal内的按钮上添加ref，并检查目标元素是否包含在该按钮中

    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>

public handleClickoutside（）{
this.props.showMessage（）
}
公共handleClick=（e）=>{
如果（！this.DOMArrowBox.current.contains（e.target）和&！ReactDOM.findDOMNode（this.btnRef.current）.contains（e.target））{
this.handleClickoutside（）
}
}
公共组件willmount（）{
document.addEventListener（“mousedown”，this.handleClick，false）
}
公共组件将卸载（）{
document.removeEventListener（“mousedown”，this.handleClick，false）
}

我认为解决此问题的最佳方法是恢复问题： 让我们想象一下，您捕捉到的不是模态外部的点击，而是模态背景包装上的点击

您应该将

包装成一个不可见的

，z索引小于模态，并采用以下样式，以获取父元素/窗口的全宽和全高：

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

.modal包装器{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
z-index:1；//必须是Modal的z-index的<
宽度：100%；//或100vw
高度：100%；//或100vh
}

然后，将

ref

附在

上，并在

手柄单击方法中，替换
==由
===
（因为，记住，我们修复了问题）

希望有帮助。
使用
onBlur
事件处理clickoutside。请看一看工作示例。
改为this.DOMArrowBox.current！==e、 target，尝试此.DOMArrowBox.contains（e.target）可能与Roko的答案重复的内容可能会有所帮助：
.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
}