javascript - react native 日历 : selected ON/OFF when date is selected

Question

我正在使用 react-native-calendar为我的项目。当我按下日期时，我可以在日历上标记。但是当再次按下标记的日期时，我想标记关闭。

这是我的函数代码:

 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') 时，一开始我得到了 undefined。当我再次点击它时，我知道为什么会这样吗？

Answer 1

Is there a way I can mark on and off dates?

正如您在 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'}/>

when I console.log('this.state.pressedDate') I get undefined at first. When I click on it again then I get the value any idea why this is happening?.

setState 是一个异步函数，所以如果你想看看你的状态在这之后发生了什么变化，你应该登录第二个回调参数，比如

   this.setState({...someState}, () => {
     console.log(this.state);
   })