我想通过单击屏幕上的任意位置来隐藏日历。谷歌日历是日历图标

Question

如果我单击屏幕上的任何位置，我想关闭我的日历...toogleCalendar 是日历图标..它控制日历操作..如果用户单击屏幕上的任何位置，我想关闭日历..

     let comp = modal ?
            <div className={styles.calendarInput}>
                <span onClick={toogleCalendar}>{value ? Dates.format(date, Dates.formats.americanMediumDate) : null}</span>
                <div className={visible ? '_common_form__show' : '_common_form__hidden'}>
                    {calendar}
                </div>
            </div>:
            calendar;
        return (
            <div>
                <label><Label config={{label, helpText}} /></label>
                {comp}
            </div>
        );
    };

    const CalendarExtended = compose(
        withState('visible', 'setVisible', false),
        withHandlers({
            toogleCalendar: ({setVisible, visible}) => () => {
                setVisible(!visible);
            }
        })
    )(Calendar);.

日历应在点击屏幕上的任意位置时关闭

Answer 1

1) 使用reference(ref)，我们可以根据div外的点击事件获取类。 2）默认情况下，日历类的状态为真，点击外部时，我将值设置为假。希望这会有所帮助。

constructor(props) {
    super(props);
    this.state = {
      isOpen: true
    };
  } 
 
handleClick = (e) => {
    if (this.toogleCalendarClass &&
      !this.toogleCalendarClass.contains(e.target)) {
      this.setState({ isOpen: false});
    }
  }


componentWillMount = () => {
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount = () => {
    document.removeEventListener('click', this.handleClick);
  }


this.toogleCalendarClass = null;
let comp = modal ?
            <div className={styles.calendarInput}>
                <span onClick={toogleCalendar}  ref={(input) => {
          this.toogleCalendarClass = input;
        }
        }>{value ? Dates.format(date, Dates.formats.americanMediumDate) : null}</span>
        
                <div className={`visible ${this.state.isOpen ? '_common_form__show' : '_common_form__hidden'}`}>
                    {calendar}
                </div>
            </div>:
            calendar;
        return (
            <div>
                <label><Label config={{label, helpText}} /></label>
                {comp}
            </div>
        );
    };

    const CalendarExtended = compose(
        withState('visible', 'setVisible', false),
        withHandlers({
            toogleCalendar: ({setVisible, visible}) => () => {
                setVisible(!visible);
            }
        })
    )(Calendar);