3

ノーマライザーを使用して、残りの API からのISO 8601 日付/時刻値 (例) を単に日付 ( 例) に変換しています。私のノーマライザーは次のようになります。2016-05-24T20:38:34+00:00 2016-05-24

export const dateNormalizer = function(value){
    if(value)
        return moment(value).format("YYYY-MM-DD");
    };

また、通貨換算にノーマライザーを使用します (たとえば、数値のみであることを確認するなど)。

私が直面している問題は、これによりフォームが常に汚れていることです。つまり、初期状態が読み込まれるとすぐに ( in 経由initialValuesでmapStateToProps)this.props.dirty常に true が返されます。をディスパッチしても にはなりresetませんdirty=false。

これを克服する方法はありますか？私が抱えている問題は、onChange入力フィールドごとに独自のオーバーライドを実装することなく、変更を放棄しようとしているという警告をユーザーに表示できるようにしたいということです。現在、常に警告されています放棄された変更。

4

1 に答える 1

6

normalizerReduxForm に組み込まれているフレームワークを使用して解決策を見つけることができませんでした。代わりに、問題リストからこの提案を取得し、独自のマスク/ノーマライザー コンポーネントを構築して、表示される前に値を調整しましたが、ストアが生の値を取得することも確認しました。Numberこれには、通貨を内部的に として表現するなどの追加の利点もありますが、UI ではString(a$と 3 桁の区切り文字を使用して) として表現できます。誰かが同様のことをしたいと思った場合のコードは次のとおりです。

import React, { Component } from 'react'

const isSupportedType = (type) => {
    return type !== 'checkbox' && type !== 'file' && type !== 'select-multiple';
};

class MaskedInput extends Component {

    normalize(value, mask, normalize, originalBlur, originalChange){
        return {
            value: mask(value),
            onBlur: (event) => {
                if (isSupportedType(event.target.type)){
                    originalBlur(normalize(event.target.value))
                }else{
                    originalBlur(event);
                }

            },
            onChange: (event) => {
                if (isSupportedType(event.target.type)){
                    originalChange(normalize(event.target.value));
                }else{
                    originalChange(event);
                }

            }

        }
    }

    render(){

        const {
            mask,
            normalizer,
            value,
            onBlur,
            onChange,
            ...rest
            } = this.props;

        return <input {...rest} {...this.normalize(value, mask, normalizer, onBlur, onChange)} />
    }

}

MaskedInput.propTypes = {
    mask: React.PropTypes.func,
    normalizer: React.PropTypes.func
};

export default MaskedInput;
于 2016-05-25T22:59:14.507 に答える