React-datepicker открывается с задержкой на клике - PullRequest
Новая
       14

React-datepicker открывается с задержкой на клике

0 голосов
/ 04 июля 2018

Я столкнулся со странной проблемой с реакцией выбора даты. Я сделал мой DatePicker совместимым с избыточной формой, и код здесь: 

<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']. Этот указатель даты покажет даты, содержащиеся в этом массиве. Я сталкиваюсь и сталкиваюсь с тем, что указатель даты появляется через две или три секунды после нажатия. Почему это происходит? Любой другой сталкивается с той же или относительной проблемой? Это что-то с filterDates ?? Спасибо!

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Я согласен с 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, он просто форматирует день (из указателя даты) в вашем формате. Затем он сравнивает строки (что должно быть быстрее!).

0 голосов
/ 04 июля 2018

Ваша 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")
        ]}
      />
    );
  }
}
...