在单击上打开日历组件，在其他地方单击应关闭该组件

Question

我有一个日历组件，应该在单击输入字段时将其打开。我为此写了一个函数search（）。但是有时它可以正常工作，有时会出现错误。

searchClick = (data) => {
        if (data == "start") {
            if (!this.state.isCalendar) {
                document.addEventListener('click', this.closeStart, true);
            }
            else {
                document.removeEventListener('click', this.closeStart, true);
            }
            this.setState(prevState => ({ isCalendar: !prevState.isCalendar }),()=>console.log(this.state.isCalendar));
        }
        else {
            if (!this.state.isCalendarNext) {
                document.addEventListener('click', this.closeEnd, false);
            } else {
                document.removeEventListener('click', this.closeEnd, false);
            }
            this.setState(prevState => ({ isCalendarNext: !prevState.isCalendarNext }));
        }
    }



closeStart = (e) => {
        if (this.searchNode != null && this.searchNodeCalendar != null) {
            if (this.searchNode.contains(e.target) || this.searchNodeCalendar.contains(e.target)) {
                return;
            }
            this.searchClick("start");
        }
    }



    closeEnd = (e) => {
        if (this.searchEndNode != null && this.searchNodeCalendarNext != null) {
            if (this.searchEndNode.contains(e.target) || this.searchNodeCalendarNext.contains(e.target)) {
                return;
            }
            this.searchClick("end");
        }
    }