還元型の反応日選択装置

Question

反応式ピッカー構成要素を還元型と互換性を持たせる必要があります。私はこれが絶対的な権利ではないことを知っていますが、還元型は私の現在のプロジェクトのためのmanadatoryです。しかし、私はそれを作るのに苦労します。私はこの方法で互換性のある日付ピッカーを使用しました。

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); 

しかし、私は反応日ピッカーでそれを作るのに苦労します。誰でもこれを達成するために私を助けることができますか？

Answer 1

私は、プロジェクトがreduxフォームと日付ピッカーを呼び出した場所に同様の問題がありました。私がやって来た解決策は、日付選択ツールをそれ自身のコンポーネントにラップし、そのコンポーネントを別のコンポーネントにラップして、それを還元型のカスタム入力コンポーネントとして使用することでした。

私はあなたが何回も折り返す必要はないと思っていますが、コンセプトはまだ似ているはずです。それはReduxの-フォームで日付ピッカーを組み込む方法の例を示し、この問題のコードを見てみましょう：あなたはカイルに答えるため

How to onFocus and onBlur a React/Redux form field that's connected to React Date Picker?