0

图书馆：https ://github.com/airbnb/react-dates

问题：是否可以在从服务器获取后设置阻塞天数？（等待/调用 isDayBlocked 回调或重新初始化日历）

问题：当数据尚未准备好时，在日历更改视图到下个月后调用回调“isDayBlocked”。

示例代码：

import { DayPickerSingleDateController } from 'react-dates';

class DayPicker {

  isDayBlocked(day) {
    return this.days.has(day);
  }

  handleMonthChange() {
    // async api fetch
    this.days = getNextMonthBlockedDays();
  }

  render() { 
    <DayPickerSingleDateController
      {...someProps}
      isOutsideRange={this.isOutsideRange}
      onNextMonthClick={this.handleMonthChange}
    />
  }

}

我尝试了什么：

  • 根据加载道具装载/卸载日历（问题 - 在 nextMount 回调之前到下个月的动画 + 当日历消失时它看起来很糟糕）

  • 加载以存储 nextMonth 数据，因此当我将视图更改为 nextMonth 'isDayBlocked' 工作正常并为 nextMonth 获取数据（问题 - 双击 nextMonth 更改或连接缓慢）

请问有什么想法吗？

4

2 回答 2

0

将您的数据保持在状态将解决您的问题并每次更新您的视图。

  handleMonthChange() {
    // async api fetch
    getNextMonthBlockedDays().then((data) => {
        this.setState({days : data});
    });
  }

您还可以设置一个标志以在处理请求时无法更改月份，或者您可以取消先前的请求。（如果您的 fetch api 实现取消）。

于 2017-10-25T07:38:16.170 回答
0

我在加载过程中添加了带有微调器的绝对覆盖 div。

于 2019-12-13T10:53:26.163 回答