如何在 redux-form 中使用 react-dates

如何解决如何在 redux-form 中使用 react-dates

我正在与 react-dates 合作开发 redux-form。逻辑已经实现，但是当我检查控制台的值时，它什么也没显示。我已经尝试过，但无法解决此问题。有人可以帮助我如何解决这个问题。谢谢

<Field component={Dateranger} type="text" name="date" label="Select Project" />

日期组件

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

  onFocusChange = (value) => {
    this.setState({ focused: !this.state.focused })
    const { input } = this.props
    input.onFocus(value)
  }

  render() {
    const { startDate,endDate,focusedInput } = this.state
    const { input } = this.props
    return (
      <div className="defaultBorderColor">
        <DaterangePicker
          {...input}
          isOutsideRange={(day) => !isInclusivelyBeforeDay(day,moment())}
          startDate={startDate}
          className="activeDatePicker"
          date={input.value}
          endDate={endDate}
          startDateId="date_input_start"
          endDateId="date_input_end"
          onDatesChange={({ startDate: dateStart,endDate: dateEnd }) => {
            input.onChange(input.value)
            this.setState(() => {
              return {
                startDate: dateStart,endDate: dateEnd,}
            })
          }}
          numberOfMonth={1}
          focusedInput={focusedInput}
          onFocusChange={(input) => this.setState({ focusedInput: input })}
          showClearDates
          minimumNights={0}
        />
      </div>
    )
  }
}

解决方法

您正在为 input.onChange(input.value) 发送与 redux-form 相同的先前值。所以你实际上并没有改变表单状态。

      onDatesChange={({ startDate: dateStart,endDate: dateEnd }) => {
        input.onChange(input.value)
        this.setState(() => {
          return {
            startDate: dateStart,endDate: dateEnd,}
        })
      }}

你需要把它改成

      input.onChange({
        startDate: dateStart,})

我还要指出，IMO，您不需要同时持有内部状态和 redux 状态。这应该是 redux 形式的受控输入。你得到 input.value 和 input.onChange