Redux 表单中的 DatePicker答案

【问题标题】：DatePicker in Redux FormRedux 表单中的 DatePicker
【发布时间】：2017-07-14 07:39:40
【问题描述】：

我想使用 DatePicker 来使用 redux 表单选择日期。我创建了这个：

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default field => (
  <div>
    <DatePicker
      onChange={field.value}
      selected={field.value}
      isClearable={true}
    >
      {field.children}
    </DatePicker>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);
<div className="form-group">
        <div className="col-xs-12 col-sm-3 ">
          <div className="label" htmlFor="date-to">DATE TO</div>{' '}
          <Field
            id="date-to"
            name="date-to"
            component={DateInput}
          />
        </div>
  </div>

但它不返回任何值，也不在字段中显示日期我该怎么办？

【问题讨论】：

你是说 React Forms 吗？
从 redux-forms 传递更改回调，例如 component={field => DateInput(field, this.props.change)} 并在您的 DatePicker 导出默认（字段，更改）中使用它作为 onChange= {value => change('date-to', value)}

标签： forms reactjs date redux redux-form

【解决方案1】：

你想包装 DatePicker 元素，它可以用作“字段”上的组件，如下所示：

const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
  <div>
        <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} />
        {touched && error && <span>{error}</span>}
  </div>
);

export default renderDatePicker

有关更多信息，请参阅此 GitHub 问题：https://github.com/Hacker0x01/react-datepicker/issues/543

【讨论】：

在我的例子中，我使用这种方法获得了一个警告：警告：失败的道具类型：无效的道具value 提供给object 类型DatePicker，预计在 DatePicker 中 string。所以，我添加了事件 onChange() 来修复它：<DatePicker {...input} dateForm="YYYY/MM/DD" selected={input.value ? moment(input.value) : null} onChange={date => input.onChange(moment(date).format('YYYY/MM/DD'))} />

【解决方案2】：

export const renderDatePicker = ({ input, label, meta: { touched, error }, ...custom }) => {
    return (
        <DatePicker {...input} {...custom} autoOk={true} dateForm='MM/DD/YYYY' onChange={(event, value) => input.onChange(value)} />
    );
};

【讨论】：

onChange={(event, value) => input.onChange(value)}，这个事件将有助于将数据更新到redux。
什么是 autoOk 属性？？
默认情况下，要从日期选择器中获取值，我们需要执行 2 个步骤。第 1 步：在日期选择器上选择一个日期。第 2 步：单击“确定”按钮获取该值。
但是如果 autoOk = true，我们只需在日期选择器上选择一个日期，就可以得到新的值。

【解决方案3】：

export const Datepicker = ({

input, id, label, required, className, disabled, intl, popoverAttachment, popoverTargetAttachment, popoverTargetOffset, todayButton,
meta: { touched, error, invalid } }) => (
    <FormGroup color={`${touched && invalid ? 'danger' : ''}`} className={`${required ? 'required ' : ' '}${className}`}>
        {label && <Label htmlFor={id}>{label}</Label>}
        <DatePicker
            className="form-control"
            {...input}
            fixedHeight
            todayButton={todayButton}
            label={label}
            id={id}
            dateForm="MM/DD/YYYY"
            selected={input.value ? moment(input.value) : null}
            disabled={disabled}
            popoverAttachment={popoverAttachment}
            popoverTargetAttachment={popoverTargetAttachment}
            popoverTargetOffset={popoverTargetOffset}
        />
        {touched && error && <FormFeedback>{intl.formatMessage(error)}</FormFeedback>}
    </FormGroup>
);

您可以像我上面提到的那样制作自己的 datepicker 组件字段并在 redux 字段中使用它

【讨论】：