如何使用redux形式的反应日期

Question

我正在使用redux-form开发react-dates。逻辑已经实现，但当我检查控制台的值时，它什么都没有显示。我已经尝试过了，但无法解决这个问题。有人能帮我解决这个问题吗。感谢

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

Answer 1

您为input.onChange(input.value)发送的值与redux表单保持的值相同。所以你实际上并没有改变形式状态。

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

您需要将其更改为

input.onChange({
startDate: dateStart,
endDate: dateEnd,
})

我还想指出，IMO，你不需要同时保持内部状态和冗余状态。这应该是一个由redux形式控制的输入。你会得到input.value和input.onChange