反应 |还原形式 |材料-ui |如何将 DatePicker 与我的表单结合使用

Posted 2023-02-22

【中文标题】反应 |还原形式 |材料-ui |如何将 DatePicker 与我的表单结合使用

【英文标题】：react | redux-form | material-ui | how to combine DatePicker with my form

【发布时间】：2016-10-09 18:12:55

【问题描述】：

解决了一些问题后，我坚持将 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），但是props中没有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",

【问题讨论】：

新版redux-form-material-ui确实有日期选择器，目前实现时间选择器没有功能。

【参考方案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 导入的。 请记住在this.props.initialize 中提供created_on: new Date('someiso8601') 以自动填充它。

【讨论】：

你能详细说明this.props.initialize吗？使用 redux-form 使用 datetime 确实需要花费很多时间..

@eugene，请参考davidmeents.com/create-redux-form-validation-initialized-values [有点忙，抱歉:)]

只是为了记录，你不需要使用关键字return，如果你的回调只有一行，它会自己返回，所以你可以删除return关键字以及，或者在()中换行

【参考方案2】：

我使用了带有 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
/>

【参考方案3】：

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

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

dateField 简单来自：

const fields: dateField, handleSubmit = this.props;

【讨论】：

正如我所写，我在表单中看不到 fields 属性

【参考方案4】：

不仅针对此 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 更改当前表单、字段和字段值的调度。