具有 redux 形式的反应日选择器



我需要使 react-day picker 组件与 redux 形式兼容。我知道这不是绝对正确的,但 redux 形式对我当前的项目是强制性的。但我很难做到。我使用了反应日期选择器,我使它与这种方式兼容:

import React from 'react';
import { PropTypes } from 'prop-types';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { injectIntl, intlShape } from 'react-intl';
import 'react-datepicker/dist/react-datepicker.css';
    const MyDatePicker = props => (
      <div>
        <DatePicker
          {...props.input}
          dateFormat="DD-MM-YYYY"
          selected={props.input.value
            ? moment(props.input.value, 'DD-MM-YYYY')
            : null}
          placeholderText={props.placeholder}
          disabled={props.disabled}
        />
        {
          props.meta.touched && props.meta.error &&
          <span className="error">
            { props.intl.formatMessage({ id: props.meta.error }) }
          </span>
        }
      </div>
    );
    MyDatePicker.propTypes = {
      input: PropTypes.shape().isRequired,
      placeholder: PropTypes.string,
      disabled: PropTypes.bool,
      meta: PropTypes.shape().isRequired,
      intl: intlShape.isRequired
    };
    export default injectIntl(MyDatePicker);

但我很难用反应日拾取器做到这一点。谁能帮助我实现这一目标?

几个月前我遇到了类似的问题,该项目需要 redux 表单和日期选择器。我得出的解决方案是将日期选择器包装到它自己的组件中,然后将该组件包装在另一个组件中,然后该组件用作 redux 表单中的自定义输入组件。

我想你不必像我一样多次包装,但概念应该仍然相似。看看这个问题中的代码,因为它展示了如何将日期选择器与 redux-form 合并的示例:

如何 onFocus 和 onBlur 连接到 React Date Picker 的 React/Redux 表单字段?

相关内容

最新更新