在外部单击时实现模态关闭

Question

我一直在尝试在我的系统中实现一个 onclick 模式关闭。我已经使用关闭按钮实现了一个模态 onclick 事件，但是在模态外部单击时没有成功

我已经尝试在 div 上添加 onclick 侦听器，但即使在模态窗口内单击，内容也会关闭。

<div

                className={"Overlay " + (this.state.hidden? "hidden": "show")}

                id={this.props.id + "-container"} onClick={() => {

                this.setState({ hidden: true })

            }}>

到目前为止，这是我的模态框渲染代码

 render() {

        const contentClassName = this.getContentClassName();

        if (this.props.show) {

            document.body.style.overflow = 'hidden';

        }

        const contentStyle = {

            width: this.props.width,

            height: this.props.height,

            position: "relative"

        };

        return (

            <div

                className={"Overlay " + (this.state.hidden? "hidden": "show")}

                id={this.props.id + "-container"} onClick={() => {

                this.setState({ hidden: true })

            }}>

                <div className={contentClassName}>

                    <div className={"Overlay-container"} style={contentStyle}>

                        <a id={this.props.id + '-closeButton'}

                           className="Overlay-closeBtn icon-close-zoom" onClick={() => {

                               this.setState({ hidden: true })

                        }}/>

                        {this.props.children}

                    </div>

                </div>

            </div>

        );

    }

正如预期的那样，我希望在模态窗口外单击时关闭模态。目前，即使在单击模态窗口后它也会关闭。