反应日期DayPickerRangeController，如果用户在已经选择时单击它，有没有办法清理开始日期或结束日期?

Question

我正在尝试找到一种方法，如果用户单击已选择的日期，则让用户取消选择当前选定的日期。 我正在使用react-dates库中的DayPickerRangeController。

这是我的源代码：

constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
focusedInput: 'startDate'
}
}
handleDateChange = ({ startDate, endDate }) => {
this.setState({ startDate, endDate });
}
handleFocusChange = focusedInput => {
this.setState({ focusedInput: focusedInput || 'startDate' })
}
dayClick = date => {
console.log(date)
}

render() {
return (
<DayPickerRangeController
onDatesChange={this.handleDateChange}
focusedInput={this.state.focusedInput}
onFocusChange={this.handleFocusChange}
startDate={this.state.startDate}
endDate={this.state.endDate}
/>
)
} 

Answer 1

如果我清楚地理解您的问题，则必须将minimumNights={1}属性设置为不允许用户选择所选日期。

<DayPickerRangeController
onDatesChange={this.handleDateChange}
focusedInput={this.state.focusedInput}
onFocusChange={this.handleFocusChange}
startDate={this.state.startDate}
endDate={this.state.endDate}
minimumNights={1}
/>