Question

将material-ui-picker中的DatePicker与redux形式集成。

DatePicker onChange无法将当前值传递给redux形式的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

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

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

1 个答案: