javascript - 如果 keepfocus 设置为 false，react-day-picker 不会关闭

Question

我试图做一个简单的 react-day-picker 实现。但是我在尝试关闭DayPicker容器时发现了一个问题，当它被触发DayPickerInput并且属性keepFocus设置为false.

<DayPickerInput
    keepFocus={false}
    placeholder="DD/MM/YYYY"
    format="DD/MM/YYYY"
/>

这是代码框：https ://codesandbox.io/s/0mn32ryl0n

如果您在输入内单击，则日期选择器叠加层将正确显示，并且如果您单击叠加层的空白区域，则叠加层将获得焦点，并且将一直聚焦到您选择一天，否则将不会关闭。因此，如果您单击覆盖之外的区域，则无法自动关闭它。

问题是，如果这是预期的行为，或者我错过了什么。如果没有选择一天并且覆盖已经聚焦，我该如何关闭 DayPicker？

Answer 1

我最终会做这样的事情，

let dayPickerInputRef = null;
function Example() {
  return (
    <div name="main-container">
      <h3>DayPickerInput</h3>
      <DayPickerInput
        ref={ref => (dayPickerInputRef = ref)}
        keepFocus={false}
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY" 
        dayPickerProps = {{
          onBlur: () => {
            setTimeout(() => {
              const elClicked = document.activeElement,
                container = document.getElementsByName(`main-container`);
              if (container && !container[0].contains(elClicked)) {
                dayPickerInputRef.hideDayPicker();
              }
            }, 1);
          }
        }}
      />
    </div>
  );
}