DatePicker (material-ui-picker) onChange 无法将值传递给 redux-form onChange 事件

Question

将来自 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)}

Answer 1

如果你 look at the docs for Field onChange，你会看到第一个参数是 event，第二个是值。此外，这将在调度 @@redux-form/CHANGE 事件之前调用，因为它允许取消该事件。

DatePicker (material-ui-picker) onChange 无法将值传递给 redux-form onChange 事件

DatePicker (material-ui-picker) onChange unable to pass the value to redux-form onChange event

material-ui

redux-form