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