如何在redux-form中使用react-dates及表单取值为空问题排查求助

问题根因 #

• 日期变更回调onDatesChange中，你使用input.onChange(input.value)向redux-form同步的是字段原有值（初始为空），没有传入新选择的起止日期，导致redux-form中该字段始终为空
• 代码存在无效属性与拼写错误：DateRangePicker不存在date属性，展示月份数的属性名应为复数numberOfMonths，自定义的onFocusChange方法未被实际调用，还操作了state中不存在的focused字段

修复后的组件代码 #

export class DateRanger extends Component {
  constructor(props) {
    super(props)
    this.state = {
      startDate: null,
      endDate: null,
      focusedInput: null,
    }
  }

  render() {
    const { startDate, endDate, focusedInput } = this.state
    const { input } = this.props
    return (
      <div className="defaultBorderColor">
        <DateRangePicker
          isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())}
          startDate={startDate}
          className="activeDatePicker"
          endDate={endDate}
          startDateId="date_input_start"
          endDateId="date_input_end"
          onDatesChange={({ startDate: dateStart, endDate: dateEnd }) => {
            // 将新选择的日期同步到redux-form
            // 可根据业务需要调整存储格式，比如转成字符串：dateStart?.format('YYYY-MM-DD')
            input.onChange({
              startDate: dateStart,
              endDate: dateEnd
            })
            this.setState({
              startDate: dateStart,
              endDate: dateEnd,
            })
          }}
          numberOfMonths={1}
          focusedInput={focusedInput}
          onFocusChange={(focusedInput) => this.setState({ focusedInput })}
          showClearDates
          minimumNights={0}
        />
      </div>
    )
  }
}

如果需要将日期范围存储为拼接的字符串格式，可将input.onChange的参数替换为dateStart && dateEnd ? ${dateStart.format('YYYY-MM-DD')},${dateEnd.format('YYYY-MM-DD')} : ''即可。

内容的提问来源于stack exchange，提问作者Brad