Question

我的范围是在日历上按每个日期，以从用户获取最多五个日期。例如，用户可以单击日历上的5个日期，并且如果用户在选定的日期上按下，则应删除选择，以便用户可以再次单击一个日期。

我正在使用react-native-calendars显示日历，并通过将日期保存为状态来实现对日期的选择。但是，如果用户按下所选日期，就无法弄清楚如何从状态中删除所选日期。

这是我的代码：

class PausePlan extends Component {

onPressSelectionHandler(day) { 
    this.setState((prevState) => ({selectedDateByOnPress: [...prevState.selectedDateByOnPress, day ], daysing: day}));     
}

state={selectedDateByOnPress: [], selected: false, daysing: ""}
render () {
    const selectedDate = _.uniqBy(this.state.selectedDateByOnPress, function(e){
        return e;
    });
    const date = format(new Date(), 'YYYY-MM-DD');
    const addingDate = format(addDays(new Date(date), 30), 'YYYY-MM-DD');
    return (
        <Container>
            <View style={{ paddingTop: 10, paddingLeft: 60 }}>
                <H1>Plan Status</H1>
            </View>


        <View style={{ paddingTop: 20 }}>
            <Calendar 
            minDate={date}
            maxDate={addingDate}
            onDayPress={(day) => {
                this.onPressSelectionHandler(day)
            }}
            markedDates={selectedDate.reduce((acc, {dateString}) => {
                acc[dateString] = { selected: dateString === this.state.daysing ? true : false, color: '#22a6b3'};
                return acc;
                },
              {}
            )}
            markingType={'period'}
            />
        </View>
        </Container>
    );
}
};

通过使用上面的代码，如果用户按日期，它将被选中，我使用onpress处理程序将其设置为我的状态。但是，如果用户在相同的选定日期上按下，则应该取消选择选定的日期，并且还应该在状态下对其进行更新（因为状态发生变化，日历会重新显示）。

我该怎么做？请指导我！

Answer 1

您可以检查selectedDateByOnPress是否已经包含day。如果是，请filter。否则，将其添加到数组中：

this.setState((prevState) => ({
      selectedDateByOnPress: 
          [...(prevState.selectedDateByOnPress.some(d => d.dateString === day.dateString) 
                 ? prevState.selectedDateByOnPress.filter(d => d.dateString !== day.dateString) 
                 : [...prevState.selectedDateByOnPress, day])
          ],
      daysing: day
    }))

在React Native中从数组onPress删除对象

1 个答案: