javascript - React-datepicker 打开延迟 onClick

Question

我在使用 react-datepicker 时遇到了一个奇怪的问题。我已经使我的日期选择器与 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
/>

filterDate 函数显示为启用数组中包含的日期，她的实现是这样的:

export const isDateUnavailable = (day, daysArray) => {
  if (!days) {
    return true;
  }
  return days.filter(item => moment(item).isSame(day)).length > 0;
};

其中 days 是格式为 ['2018-09-09'] 的数组。这个日期选择器将显示包含在这个数组中的日期。我正面临日期选择器在点击后 tw0 或三秒后出现的问题。为什么会这样？是否有其他人面临相同或相关的问题？它与 filterDates 有关系吗？谢谢!

Answer 1

您的 isDateUnavailable 函数非常繁重，所以我可以想象在所有可能的日期运行时，日期选择器需要 2-3 秒来初始化。

我认为最好将您的 props.availability 数组作为您希望能够使用 includeDates 属性选择的日期。

示例

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