Question

我正在尝试在页面上实现反应无限日历，点击日期后，我希望日历显示该日期。

这是我的代码：

<InfiniteCalendar 
    width={'100%'}
    height={300}
    selected={new Date()}
    maxDate={new Date()}
    onSelect={(v) => {
        //something
    }
}/>

我想在onSelect中更新所选内容，但我不知道该怎么做。

任何人都可以提供一些建议吗？

Answer 1

将日期数组添加到您的州

state = {
  dates: []
};

然后将Array Remover函数添加到您的类中

function arrayRemove(arr, value) {
  return arr.filter(function (ele) {
    return ele != value;
  });
}

然后将onSelect函数添加到您的InfiniteCalendar

     <InfiniteCalendar
       Component={MultipleDatesCalendar}
       interpolateSelection={defaultMultipleDateInterpolation}
       selected={this.state.dates}
       onSelect={(date) => {
         var converted =  date.toLocaleString('default', { weekday: 'short' }) 
                      + ' ' + date.toLocaleString('default', { month: 'short' }) 
                      + ' ' + date.getDate() + ' ' +date.getFullYear() + ' 00:00:00';

       if (!this.state.dates.includes(converted)) {
         this.setState({
           dates: [...this.state.dates, converted]
         })

        return converted;

       } else {
         var result = arrayRemove(this.state.dates, converted);

        this.setState({
          dates: result
        })
    }
  }
} />

然后使用您的状态显示所选日期

<ol>
   {this.state.dates.map((date) => {
     return <li>{date}</li>
   })}
</ol>

反应无限日历设置日期

1 个答案: