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

【问题标题】：react-day-picker doesn't close if keepfocus is set to false如果 keepfocus 设置为 false，react-day-picker 不会关闭
【发布时间】：2018-05-20 15:08:24
【问题描述】：

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

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

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

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

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

【问题讨论】：

> 如果您在输入内单击，则日期选择器叠加层将正确显示，如果您单击叠加层的空白区域，则叠加层将获得焦点，直到您选择一个天 这不是我得到的行为，因为我打开日期选择器并在外面单击，面板消失了。

标签： javascript react-day-picker

【解决方案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>
  );
}

【讨论】：

对我不起作用