反应| redux-form | 材料-ui | 如何将DatePicker与我的表单结合起来

Question

在解决了一些问题之后,我坚持将DatePicker数据发送到我的表单.在我的表单中,我主要使用来自redux-form-material-ui的元素,但DatePicker不是它的一部分.

我找到了两种用redux-form创建DatePicker组件的方法.

<Field
  name="startDate"
  autoOk={true}
  floatingLabelText="startDate"
  component={(startDate) => {
    return <DatePicker {...startDate} />;
  }}
  onChange={(event, date) => {console.log(date);}}
/>

和

<DatePicker
  name="startDate"
  autoOk={true}
  floatingLabelText="startDate"
  onChange={(event, date) => {console.log(date)}} />

问题是我不知道用它来更新表单数据的方法.第一个示例甚至没有在文本字段中显示选中的日期.我可以在form.myForm商店看到,我使日期字段处于活动状态,但它永远不会更新为选择日期.第二个显示选择日期,但它不是form.myForm对象的一部分...

我在互联网上找到了一些例子(例如https://github.com/erikras/redux-form/issues/364),但fields道具中没有对象,所以无法调用this.props.fields.startDate.onChange.

我不确定使用redux-form和material-ui的好方法是什么,因为没有很多工作示例.我开始考虑为我使用的每个组件创建一个包装器,它将提供onChange方法,它将使用表单中的任何更改来更新我的商店.但是我不再需要redux-form,所以我认为必须有其他解决方案,我可以使用.

"react": "15.1.0",
"react-tap-event-plugin": "1.0.0",
"redux": "3.0.5",
"redux-form": "^6.0.0-alpha.4",
"redux-form-material-ui": "^2.0.0",

Answer 1

import React from 'react';
import DatePicker from 'material-ui/DatePicker';

export default ({ input, label, meta: { touched, error }, ...custom }) => {
    return (
        <DatePicker
          onChange={(e, val) => {return input.onChange(val)}}
          {...custom}
          value={input.value}
        />
);
}

考虑到这在文件中renderDatePicker.js,用法是,

<Field name="created_on" component={RenderDatePicker} floatingLabelText="Created Date"/>

从哪里Field导入redux-form.记住要提供{created_on: new Date('someiso8601')}在this.props.initialize以自动填充它.

Answer 2

这是我在代码中使用它的方法。

<DatePicker
    selected={dateField.value}
    onChange={param => dateField.onChange(param)} />

dateField简单地来自：

const {fields: {dateField}, handleSubmit} = this.props;