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

Question

我正在尝试找到一种方法让用户在单击已选择的日期时取消选择当前选定的日期。我正在DayPickerRangeController从react-dates图书馆使用。

这是我的源代码：

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

标签： javascriptreactjsreact-dates

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