我正在为项目使用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')
时,我一开始就不确定。当我再次单击它时,我会明白为什么会发生这种情况的价值。
答案 0 :(得分:0)
有没有一种方法可以标记日期和日期?
正如您在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);
})