将来自 material-ui-picker 的 DatePicker 与 redux-form 集成。
DatePicker onChange 无法将当前值传递给redux-form的onChange,代码如下引用
helper.js=>>> DatePicker 包装器
export const DatePickerField = ({
label,
input: { onChange, value, name },
meta: { error, form },
minDate,
maxDate,
dispatch
}) => (
<DatePicker
name={name}
label={label}
value={value}
helperText={error}
minDate={minDate}
maxDate={maxDate}
error={Boolean(error)}
onChange={onChange}
onError={(_, error) =>
dispatch(formActions.stopSubmit(form, { [name]: error }))
}
disablePast
format={'dd.MM.yyyy'}
/>
)
component.js =>> Redux 形式的组件
import { DatePickerField } from 'utils/helper'
<Field
name={endDate}
component={DatePickerField}
onChange={value =>
store.dispatch(maxDateChange(value))
}
/>
预期结果: =====================
action @@redux-form/CHANGE
meta: {…}, payload: Sat Jan 19 2019 00:00:00 GMT+0200 (Eastern European Standard Time)}
action {type: "@@invoice/MAX_DATE_CHANGE", value: Sat Jan 19 2019 00:00:00 GMT+0200 (Eastern European Standard Time)}
实际结果: =======================
action @@invoice/MAX_DATE_CHANGE
value: {preventDefault: ƒ} <--value should be DatePicker current value.
action {type: "@@redux-form/CHANGE", meta: {…},
payload: Sat Jan 19 2019 15:49:00 GMT+0200 (Eastern European Standard Time)}
最佳答案
如果你look at the docs对于 Field
onChange
,您会看到第一个参数是 event
,第二个是值。此外,这将在 @@redux-form/CHANGE
事件被调度之前调用,因为它允许取消该事件。
关于material-ui - DatePicker(material-ui-picker) onChange 无法传值给redux-form onChange事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54148120/