问题描述
我正在与 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