React-Day-Picker DayPicker 组件在单击日历外部时未关闭

Question

我在使用

DayPicker

API 来使用弹出日历时遇到问题。当我单击日历外部时，我需要关闭/隐藏。我想像

DayPickerInput

组件一样工作，但是使用我们的文本框输入。我仅需要弹出日历。使用

onBlur

只能部分起作用，因为如果我单击一周，它不会立即识别日历容器的焦点。我真的很苦恼这个问题，我确信有一个简单的解决方案。

这是代码片段：

    <div className={calendarPopOut} onBlur={handleClickOutside}>
      <DayPicker
         disabledDays={currentCalendarWeek}
         className={dayPicker}
         showOutsideDays
         month={currentSelectedMonth}
         toMonth={currentMonth}
         weekdayElement={<ThreeCharacterAbv />}
         onDayClick={handleChange}
         onBlur={handleClickOutside}
       />
   </div>

Answer 1

您可以创建对日期选择器容器的引用，并在文档单击时创建事件侦听器并关闭日期选择器。

const datePickerRef = useRef<HTMLDivElement | null>(null);

// Add event listener to close the date picker when clicked outside
useEffect(() => {
  const handleClickOutside = (event: MouseEvent) => {
      // Close the date picker only when clicked outside
      if (
        datePickerRef.current &&
        event.target instanceof Node &&
        !datePickerRef.current.contains(event.target)
      ) {
        handleCloseDayPicker();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
}, [handleCloseDayPicker]);


<div className={calendarPopOut} ref={datePickerRef}>
    <DayPicker
       disabledDays={currentCalendarWeek}
       className={dayPicker}
       showOutsideDays
       month={currentSelectedMonth}
       toMonth={currentMonth}
       weekdayElement={<ThreeCharacterAbv />}
       onDayClick={handleChange}
       onBlur={handleCloseDayPicker}
     />
 </div>

我已经指定了如果您不使用打字稿，您可以删除它们的类型。 希望这有帮助！