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

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication4"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:UserControl1 MyProperty="{Binding MainWindowProperty}"/>
    </Grid>
</Window>

在文件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')}以自动填充它。

Answer 2

我使用了redux形式的react-datepicker。关键是要正确设置“选定”属性。

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

Answer 3

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

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

dateField来自：

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

Answer 4

不仅对于此Datepicker而且对于任何自定义输入，创建一个单独的组件来管理输入类型和进程。这样可以轻松地为您的redux-form字段提供信息。这是我在Grad时由高级开发人员教授的简单过程。

在您的情况下，首先将以下附加库导入您的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函数：

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

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

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

4 个答案: