javascript - react-native-calendar : 选择日期时选择 ON/OFF
问题描述
我正在为我的项目使用react-native-calendar。mark on
当我按日期时,我可以日历。但我想mark off
再次按下标记的日期。
这是我的功能代码:
onDayPress = (day) => {
const _selectedDay = Moment(day.dateString).format(_format);
this.setState(({pressedDate}) => ({
pressedDate: {
...pressedDate,
[_selectedDay] : {
selected: true
}
},
selectedDay:_selectedDay
}))
console.log(this.state.pressedDate, 'this.state.pressedDate')
}
在我的日历中
<Calendar
style={styles.calendarBox}
markedDates={this.state.pressedDate}
onDayPress={this.onDayPress}
markingType={'multi-dot'}
monthFormat={'yyyy MMMM'}/>
有什么方法可以标记开和关日期吗?另外,我只想标记最多三个日期。这可能吗?
另外,当我console.log('this.state.pressedDate')
一开始不确定时。当我再次单击它时,我会知道为什么会发生这种情况?
解决方案
有什么方法可以标记开和关日期吗?
正如您在Calendar
implementation中看到的,它仅在您将差异传递current
给该组件时才会更新。你可以这样做:
_onDayPress = day => {
const { dateString } = day;
const { markedDates } = this.state;
const isMarkedBefore = !!(
markedDates[`${dateString}`] &&
markedDates[`${dateString}`].selected
);
markedDates[`${dateString}`] = { selected: !isMarkedBefore };
this.setState(
{ ...this.state, markedDates, current: null },
() => {
this.setState({
...this.state,
current: dateString
});
});
};
...
<Calendar
style={styles.calendarBox}
current={this.state.current}
markedDates={this.state.markedDates}
onDayPress={this._onDayPress}
markingType={'multi-dot'}
monthFormat={'yyyy MMMM'}/>
当我 console.log('this.state.pressedDate') 一开始我得到未定义。当我再次单击它时,我会知道为什么会发生这种情况?
setState
是异步函数,所以如果你想查看之后你的状态发生了什么变化,你应该登录第二个回调参数,比如
this.setState({...someState}, () => {
console.log(this.state);
})
推荐阅读
- python - 使用python获取带前缀的s3文件
- javascript - 如何从javascript中的索引属性中获取值?
- android - 原因:'F:\android\adt-bundle-windows-x86-20140702\sdk\build-tools\27.0.3\aidl.exe' 中缺少aidl
- jquery - Jquery依赖下拉克隆不起作用
- database - 在 Heroku 上清除 MongoDB
- php - 无法连接到 phpseclip 中的主机(sftp)
- tensorflow - keras CNN:训练集和验证集相同但精度不同
- android - Dagger 2 注入对象
- excel - 图表公式引用错误
- xaml - xaml 在不存在的行中显示错误