Question

我遇到了一个有关react-datepicker的奇怪问题。我已经使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")
        ]}
      />
    );
  }
}

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

基本上，它不是根据days数组中的每个项目创建一个矩对象，而是按照您的格式对日期（根据日期选择器）进行格式化。然后它比较字符串（应该更快！）。

React-datepicker打开时延迟onClick

2 个答案: