在ReduxForm中使用规范化器会导致窗体始终变脏

Question

我正在使用标准化器将来自rest 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");
    };

我还使用标准化器进行货币转换(例如确保它只是数字等).

我面临的问题是,这导致表单总是很脏.换句话说,只要加载初始状态(via initialValuesin mapStateToProps),它this.props.dirty总是返回true.即使是派遣reset也不会导致dirty=false.

有办法克服这个问题吗？我遇到的问题是,我希望能够向用户显示一个警告,即他们将要放弃他们的更改,而不必onChange为每个输入字段实现我自己的覆盖,现在他们总是被警告废弃的变化.

Answer 1

无法使用normalizerReduxForm内置的框架找到解决方案.相反,我从问题列表中获取了这个建议,并构建了我自己的掩码/规范化器组件,以便在显示之前调整值,同时确保存储获取原始值.这也有额外的好处,让我做一些事情,比如代表货币作为Number内部,但作为一个String(有$千万分隔符)在ui.这是代码,以防任何人最终想要做类似的事情:

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;