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;
};

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

Answer 1

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

我认为最好给日期选择器你的 props.availability 数组作为你希望能够 select 的日期，使用 includeDates 属性。

例子

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

Answer 2

我同意 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)}

基本上，它不是从天数数组中的每个项目创建一个时刻对象，它只是按照您的格式格式化日期（来自日期选择器）。然后它比较字符串（应该更快！）。

React-datepicker 打开延迟 onClick

React-datepicker is opening with delay onClick

javascript

reactjs

delay

react-datepicker