Question

在我的反应组件I create a React infinite calendar中，允许用户选择多个日期。

我想在用户点击日历下方的按钮后记录所有这些日期。但是，每次我尝试记录这些日期时，它都会返回一个空数组。

我有duplicated the solution to this issue here但仍然无效。任何建议都会很棒。以下是我的代码。

import RaisedButton from 'material-ui/RaisedButton';
import InfiniteCalendar, { Calendar, defaultMultipleDateInterpolation, withMultipleDates } from 'react-infinite-calendar';
import '../../../node_modules/react-infinite-calendar/styles.css';

const MultipleDatesCalendar = withMultipleDates(Calendar);

class Planner extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedDates: []
        };
     }

displayDates() {
   console.log("SELECTED DATES");
   console.log(this.selectedDates);
}

render() {
    return (
<InfiniteCalendar
     Component={MultipleDatesCalendar}
     height={250}
     interpolateSelection={defaultMultipleDateInterpolation}
     selected={this.state.selectedDates}
     layout={'portrait'}
     width={'100%'}
     onSelect={(selectedDate) => defaultMultipleDateInterpolation(selectedDate, 
     this.state.selectedDates)}
     />
<RaisedButton
    className=""
    target="_blank"
    label="Available"
    primary={true}
    onClick={() => this.displayDates(this.state.selectedDates)}
                                        />
    );
}

export default Planner

Answer 1

这对我有用。

onSelect = { (selectedDate) =>{
            let aux = defaultMultipleDateInterpolation(selectedDate,this.state.dates)
            this.setState({
              dates:aux
            })
            return aux;
          }
        }

Answer 2

将日期数组添加到您的州

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
        })
    }
  }
} />

反应无限日历 - 保存多个日期

2 个答案: