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

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>        );    }正如预期的那样，我希望在模态窗口外单击时关闭模态。目前，即使在单击模态窗口后它也会关闭。