react-native-calendar:选择日期时选择打开/关闭

时间:2019-07-12 01:53:39

标签: javascript react-native

我正在为项目使用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')时,我一开始就不确定。当我再次单击它时,我会明白为什么会发生这种情况的价值。

1 个答案:

答案 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);
   })