6

解决了一些问题后，我坚持将 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",
4

4 回答 4

5 
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}
        />
);
}

考虑到这在 file 中renderDatePicker.js，用法是，

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

从哪里Field进口redux-form。请记住提供自动填充它{created_on: new Date('someiso8601')}。this.props.initialize

于 2016-09-16T10:10:29.233 回答
3

我使用了带有 redux 形式的 react-datepicker。关键是正确设置“selected”属性。

const selectedDate = this.props.fields.date.value ?
  moment(this.props.fields.date.value, 'DD/MM/YYYY') :
  moment();

<DatePicker
  {...date}
  className="form-control"
  dateFormat="DD/MM/YYYY"
  selected={selectedDate}
/>
于 2016-08-18T08:25:26.797 回答
2

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

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

dateField简单地来自：

const {fields: {dateField}, handleSubmit} = this.props;
于 2016-06-12T12:19:00.267 回答
1

不仅针对此 Datepicker，还针对任何自定义输入，创建一个单独的组件来管理输入类型和流程。这使得输入你的 redux-form 字段变得很容易。这是我在读研究生时由高级开发人员教给我的简单过程。

在您的情况下，首先将以下附加库导入您的 redux-form 组件

import moment from 'moment'
import { change } from 'redux-form'  //We use the change to dispatch the own props of the redux-form component to resetDateField

通过在其中导入 DatePicker 创建一个单独的组件。您的组件将如下所示：

const datePickerInput = ({input,name,label,...props}) => {
 return (
  <div>
   <label htmlFor={input.name}> 
    <span>
     {label}
    </span> 
   </label>
   <div>
      <DatePicker
          className='form-control'
          {...input}
          {...props}
      />
   </div>
  </div>
 )
}

现在将此组件提供给您的 redux-form 字段的组件。

<Field
  name = "startDate"
  label = "Start Date"
  dateFormat = 'MMM Do YY'
  component={datePickerInput}
  selected = {/*pass state value of startDate or pass some default null for startDate if nothing selected*/}
  onChange={ (date) => {this.handleChangeStartDate(date, 'startDate')} } //bind this function in constructor and also setState value for your start date as null or some default 
/>

onChange 函数将使用 moment 进行如下处理：

handleChangeStartDate(date, target) {
    const {resetDateField } = this.props
    this.setState({
      [target]: moment(date)
    })
    resetDateField('startDate', '' )
  }

现在通过传递 dispatch 和 ownProps 并返回 resetDateField 值将这个 resetDateField 挂接到你的 reduxForm @connect 中，期望使用这个 resetDateField 更改当前表单、字段和字段值的调度。

于 2017-10-26T04:36:51.473 回答