Question

图书馆：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更改或缓慢连接）

有什么想法吗？

Answer 1

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

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

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

Answer 2

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

apio fetch后，airbnb / react-dates设置为封闭天数

2 个答案: