我想通过点击屏幕上的任意位置来隐藏日历.toogleCalendar是日历图标

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之外的click事件获取类。 2）默认情况下，日历类的状态为true，在外部单击时，我将值设置为false。希望这有帮助。

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);