airbnb/react-dates 设置在 api 获取后被阻止的天数

Question

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

问题：是否可以设置从服务器获取后的屏蔽天数？ (wait/recall 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}
    />
  }

}

我试过的:

mount/unmount 日历取决于加载道具（问题 - 在 nextMount 回调之前到下个月的动画 + 当日历消失时它看起来很糟糕）
加载以存储 nextMonth 数据，因此当我将视图更改为 nextMonth 时 'isDayBlocked' 工作正常并获取 nextMonth 的数据（问题 - 双击 nextMonth 更改或连接缓慢）

有什么想法吗？

Answer 1

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

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

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

Answer 2

我在加载过程中使用微调器添加了绝对叠加 div。

airbnb/react-dates 设置在 api 获取后被阻止的天数

airbnb/react-dates set blocked days after api fetch

promise

reactjs

react-dates