Question

我试图简单地实现react-day-picker。但是，当我从DayPicker触发DayPickerInput并将属性keepFocus设置为false时，我发现在尝试关闭<DayPickerInput keepFocus={false} placeholder="DD/MM/YYYY" format="DD/MM/YYYY" />容器时遇到了问题。

.innerHTML

以下是codesandbox：https://codesandbox.io/s/0mn32ryl0n

如果您在输入内部单击，则会正确显示daypicker叠加层，如果您在叠加层的空白区域中单击，则叠加层将被聚焦，并且它将被聚焦直到您选择一天，否则它将赢得＃t被关闭因此，如果您点击叠加层外的区域，则无法自动关闭。

问题是，如果这是预期的行为，或者我可能会遗漏某些东西。如果未选择日期并且叠加层已经聚焦，我该如何关闭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>
  );
}

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

1 个答案: