forms - Redux 表单中的 DatePicker

Question

我想使用 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>

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

Answer 1

您想要包装 DatePicker 元素，使其可以用作“Field”上的组件，如下所示:

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