react-dates DayPickerRangeController，如果用户在已选择时单击它，是否有办法清除 startDate 或 endDate？

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