反应日期选择器 |单击图标时打开日历，但单击任意位置时关闭答案

【问题标题】：react-datepicker | Open calendar when clicking icon but closing when click anywhere反应日期选择器 |单击图标时打开日历，但单击任意位置时关闭
【发布时间】：2021-01-20 18:32:59
【问题描述】：

目前我正在尝试在单击图标时打开日历（我可以这样做），但我想在单击窗口的其他任何位置时关闭日历。

我不完全确定如何做到这一点，希望得到一些帮助

这是我的组件

const DatePicker: FC<Props> = ({
  label,
  icon,
  date,
  onChange,
  minDate,
  maxDate,
  tabIndex,
}) => {
  const dateObj = useMemo(() => (date ? date.toDate() : null), [date])
  const minDateObj = useMemo(() => (minDate ? minDate.toDate() : null), [
    minDate,
  ])
  const maxDateObj = useMemo(() => (maxDate ? maxDate.toDate() : null), [
    maxDate,
  ])

  const [calendarIsOpen, setCalendarIsOpen] = useState(false)

  return (
    <div className={css.host}>
      <div className={css.label}>{label}</div>
      <div className={css.wrapper}>
        <label>
          <button
            className={css.calendarButton}
            onClick={() => setCalendarIsOpen(!calendarIsOpen)}
          >
            {icon}
          </button>
        </label>
        <ReactDatePicker
          selected={dateObj}
          className={css.input}
          calendarClassName={css.calendar}
          showTimeSelect
          dateFormat="dd/MM/yyyy h:mm:ss aa"
          onChange={(newDate: Date) => {
            if (newDate) {
              const momentDate = moment(newDate)
              onChange(momentDate)
            }
          }}
          startDate={minDateObj}
          endDate={maxDateObj}
          minDate={minDateObj}
          maxDate={maxDateObj}
          showPopperArrow={false}
          popperModifiers={{
            offset: {
              enabled: true,
              offset: '-28px, 4px',
            },
          }}
          renderCustomHeader={customHeader}
          open={calendarIsOpen}
          tabIndex={tabIndex}
        />
      </div>
    </div>
  )
}

export default DatePicker

【问题讨论】：

标签： javascript reactjs react-datepicker

【解决方案1】：

解决方案：

这应该可行。

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref, onOutSideClick) {
  /**
   * Alert if clicked on outside of element
   */
  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      onOutSideClick();
    }
  }

  useEffect(() => {
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });
}

export default function DatePicker({ onOutSideClick,...props }) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef, onOutSideClick);
   /// your code
  return (
   // your code
  );
}

并像<DatePicker onOutsideClick={()=>{// hide this date picker component.}}/>一样使用调用它

【讨论】：