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

【问题标题】：DatePicker (material-ui-picker) onChange unable to pass the value to redux-form onChange eventDatePicker (material-ui-picker) onChange 无法将值传递给 redux-form onChange 事件
【发布时间】：2019-06-06 11:17:00
【问题描述】：

将 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-form 组件

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

【问题讨论】：

标签： material-ui redux-form

【解决方案1】：

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

【讨论】：

@erikras 非常感谢下面提到的解决方案：Billing reducer 可以只监听该特定表单和字段的 @@redux-form/CHANGE 操作。无需同时派送。
下面的代码： import { CHANGE } from 'redux-form' if(action.type === CHANGE && action.meta.form === 'billingForm' && action.meta.field == = 'billingDate') { return { ...state, billingDate: action.payload }; }
我在从 material-ui 迁移到 material-ui@next 时遇到了这些问题，伙计们不要停止依赖 Redux-form，它与 material-ui@next 一起是一个很棒的创作，现在支持移动响应问题，唯一的问题是有时需要一些文档帮助才能相互连接。