将规范器与 ReduxForm 一起使用会导致表单总是脏的

Question

我正在使用标准化器将来自休息 api 的 ISO 8601 date/time 值（例如 2016-05-24T20:38:34+00:00）转换为简单日期（例如 2016-05-24）。我的标准化器看起来像这样：

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

我还使用规范器进行货币转换（例如确保它只是数字等）。

我面临的问题是，这导致表单总是变脏。换句话说，一旦加载初始状态（通过 mapStateToProps 中的 initialValues），this.props.dirty 始终 returns 为真。即使发送 reset 也不会导致 dirty=false。

有办法克服这个问题吗？我遇到的问题是我希望能够向用户显示他们将要放弃更改的警告，而不必为每个输入字段实现我自己的 onChange 覆盖，现在他们对于已放弃的更改，总是发出警告。

Answer 1

无法找到使用 normalizer 框架 built 到 ReduxForm 的解决方案。相反，我使用 this suggestion from the issues list 和 built 我自己的 mask/normalizer 组件在显示之前调整值，同时确保商店获取原始值。这还有一个额外的好处，让我可以做一些事情，比如在内部将货币表示为 Number，但在 ui 中表示为 String（带有 $ 和千位分隔符）。这是代码，以防有人最终想做类似的事情：

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;

将规范器与 ReduxForm 一起使用会导致表单总是脏的

Using normalizer with ReduxForm results in form always being dirty

reactjs

redux

redux-form