Использования нормализатора с результатами ReduxForm в форме всегда быть грязным

Question

Я использую нормализатор для преобразования значений/времени 8601 даты ISO (2016-05-24T20:38:34+00:00 например), приходящий из REST API для просто дат (2016-05-24 например). Моя нормализатор выглядит следующим образом:

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

Я также использую нормализатор для конвертации валюты (например, убедившись, что это только цифры и т.д.).

Проблема, с которой я сталкиваюсь, заключается в том, что это вызывает форму всегда быть грязным. Другими словами, как только начальное состояние загружается (через initialValues в mapStateToProps) this.props.dirty всегда возвращает true. Даже отправка reset не приводит к dirty=false.

Есть ли способ преодолеть это? Проблема, с которой я сталкиваюсь, заключается в том, что я хочу иметь возможность отображать предупреждение пользователю о том, что они собираются отказаться от своих изменений, не выполняя мой собственный onChange переопределение для каждого поля ввода, а сейчас они всегда предупрежден о заброшенных изменениях.

Answer 1

Не удалось найти решение с использованием рамки normalizer, встроенной в ReduxForm. Вместо этого я взял this suggestion from the issues list и создал свой собственный компонент маска/нормализатор для настройки значений до их отображения, но также убедитесь, что в хранилище получены необработанные значения. Это также дает дополнительное преимущество, позволяя мне делать такие вещи, как представлять валюту в качестве 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;