Javascript React DATE PICKER在延迟onClick时打开

我正面临着一个奇怪的问题。我已使我的日期选择器与redux表单兼容，代码如下：

<DatePicker
  customInput={<CustomDateInputNew {...props} />}
  onChange={date => {
    props.input.onChange(date ? formatValueToState(date) : "");
    if (props.onSelect) {
      props.onSelect(date);
    }
  }}
  dateFormat="DD/MM/YYYY"
  openToDate={props.openToDate}
  selected={
    props.input.value ? parseStateToValue(props.input.value) : undefined
  }
  filterDate={day => isDateUnavailable(day, props.availability)}
  locale={moment.locale("en-gb")} //sets monday first day of week
/>

---

其中，days是一个数组，格式为['2018-09-09']。此日期选择器将显示此数组中包含的日期。我面临的问题是，日期选择器出现在tw0或单击后3秒之后。为什么会这样？是否有其他人面临相同或相关的问题？是不是和过滤日期有关？？谢谢

您的

isDateUnavailable

函数非常繁重，因此我可以想象在所有可能的日期上运行该函数时，日期选择器需要2-3秒才能初始化

我认为最好将

props.availability

数组作为日期选择器，您可以使用

includeDates

prop选择日期

示例

class Example extends React.Component {
  render() {
    return (
      <DatePicker
        includeDates={[
          moment("2018-09-09"),
          moment("2018-09-09").subtract(1, "days")
        ]}
      />
    );
  }
}

类示例扩展了React.Component{
render（）{
返回(
);
}
}

我同意

isDateUnavailable

重量

你可以把它弄轻一点，看看会发生什么

export const checkAvailability = (availableDays) => 
  (!availableDays) 
  ? () => true // If the array is empty, just create a function which returns always true!
  : (currentDay) => 
    availableDays.filter(
      dayString => dayString === currentDay.format('YYYY-MM-DD')
    ).lenght > 0;

像这样使用它

filterDate={checkAvailability(props.availability)}

---

基本上，它不是从days数组中的每个项目创建一个矩对象，而是以您的格式格式化日期（从datepicker）。然后比较字符串（应该更快！）。

您的

isDateUnavailable

相当重，因此我可以想象在所有可能的日期上运行时，日期选择器需要2-3秒才能初始化。我认为最好给日期选择器一个你想要的日期数组，使用

includeDates

属性。要确定

是否不可用

是个问题，就像@Tholle说的，在

isDateUnavailable

中尝试一个简单的返回，看看延迟是否持续或改善。另外，使用精确的格式解析日期字符串可以加快速度：

时刻（项目“YYYY-MM-DD”）我的数组可能非常大。它可以有很多元素。如何对许多元素执行此操作？@user7334203请尝试
includeDates={props.availability.map（d=>moment（d）}
并查看它是否比您当前拥有的更快。
filterDate={checkAvailability(props.availability)}