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



将 datePicker from material-ui-picker 与 redux-form 集成。

日期选择器 onChange 无法将当前值传递给 onChange 的 redux-form,下面的代码供参考

helper.js=>>> 日期选取器包装器

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

组件.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)}

如果您查看 Field onChange 的文档,您会发现第一个参数是event,第二个是值。此外,这将在调度@@redux-form/CHANGE事件之前调用,因为它允许取消该事件。

最新更新