[英]airbnb/react-dates set blocked days after api fetch
Library : https://github.com/airbnb/react-dates图书馆: https : //github.com/airbnb/react-dates
Question : Is possible to set blocked days after fetch from server?问题:从服务器获取后是否可以设置阻止天数? (wait/recall isDayBlocked callback or re-initialize calendar)
(wait/recall isDayBlocked 回调或重新初始化日历)
Problem : Callback 'isDayBlocked' is called after calendar changes view to next month when data are not ready yet.问题:当数据尚未准备好时,在日历将视图更改为下个月后调用回调“isDayBlocked”。
Example Code:示例代码:
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}
/>
}
}
What i tried :我试过的:
mount/unmount calendar depending on loading prop (problem - animation to next month before nextMount callback + when calendar disappear it looks bad)根据加载道具挂载/卸载日历(问题-动画到 nextMount 回调之前的下个月+日历消失时看起来很糟糕)
load to store nextMonth data, so when i change view to nextMonth 'isDayBlocked' works good and fetch data for nextMonth (problem - double click on nextMonth change or slow connection)加载以存储 nextMonth 数据,因此当我将视图更改为 nextMonth 'isDayBlocked' 效果很好并为 nextMonth 获取数据(问题 - 双击 nextMonth 更改或连接缓慢)
Any ideas please?请问有什么想法吗?
Holding your data in state would fix your issue and update your view everytime.将您的数据保持在状态将解决您的问题并每次更新您的视图。
handleMonthChange() {
// async api fetch
getNextMonthBlockedDays().then((data) => {
this.setState({days : data});
});
}
You can also set a flag to not be able to change the month while a request is processing or you could cancel the previous request.您还可以设置一个标志,使其在处理请求时无法更改月份,或者您可以取消之前的请求。 (if your fetch api implements cancellation).
(如果您的 fetch api 实现了取消)。
我在加载过程中添加了带有微调器的绝对叠加 div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.