3

我正在使用规范器将来自 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");
    };

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

我面临的问题是这导致表单总是很脏。换句话说，一旦加载初始状态（通过initialValuesin mapStateToProps）this.props.dirty总是返回 true。即使调度 areset也不会导致dirty=false.

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

4

1 回答 1

6

无法使用normalizerReduxForm 内置的框架找到解决方案。相反，我从问题列表中获取了这个建议，并构建了我自己的掩码/规范化器组件，以在显示值之前调整它们，同时确保商店获取原始值。这还有一个额外的好处，就是让我可以做一些事情，比如在Number内部将货币表示为 a，但在 ui 中作为 a String（带有 a$和千位分隔符）。这是代码，以防有人最终想要做类似的事情：

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 回答