在使用date-fns格式化的react-day-picker输入上输入日期

Question

我不能使用onDayChange使用react-day-picker手动输入日期，但是当我使用onChange时我可以。但是，我没有使用onChange获得所选值，而且我还使用了date-fns来格式化日期。

handleChangeDate(date, value) {
    this.setState({
      [value]: date,
    });
  }

  parseDate(str, format, locale) {
    const parsed = dateFnsParse(str, format, new Date(), { locale });

    if (dateFnsValid(parsed)) {
      return parsed;
    }

    return undefined;
  }

  formatDate(date, format, locale) {
    return dateFnsFormat(date, format, { locale });
  }

使用onDayChange

<DayPickerInput
   placeholder="Date Engaged"
   value={dateEngaged}
   format="dd/MM/yyyy"
   formatDate={this.formatDate}
   parseDate={this.parseDate}
   onDayChange={value => this.handleChangeDate(value, 'dateEngaged')}
  />

使用onChange

<DayPickerInput
   placeholder="Date Engaged"
   value={dateEngaged}
   format="dd/MM/yyyy"
   formatDate={this.formatDate}
   parseDate={this.parseDate}
   onChange={value => this.handleChangeDate(value, 'dateEngaged')}
  />

Answer 1

这是他们的文档中有关如何使用handleDayChange的示例

handleDayChange(selectedDay, modifiers, dayPickerInput) {
 const input = dayPickerInput.getInput();
 this.setState({
   selectedDay,
   isEmpty: !input.value.trim(),
   isValidDay: typeof selectedDay !== 'undefined',
   isDisabled: modifiers.disabled === true,
 });
}

 <DayPickerInput onDayChange={handleDayChange}/>