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"
/>

这里是codesandbox: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>
  );
}