Mit normalizer mit ReduxForm Ergebnisse in Form ist immer schmutzig

Question

Ich bin ein normalizer mit ISO 8601 Datums-/Zeitwerte zu konvertieren (z2016-05-24T20:38:34+00:00) von einer Ruhe api kommt einfach ein Datum (z2016-05-24). Mein normalizer sieht wie folgt aus:

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

ich auch eine Normalisierungseinrichtung für die Währungsumrechnung verwenden (zum Beispiel dafür, dass es nur Zahlen, etc).

Das Problem, das ich konfrontiert ist, ist, dass dies das Formular immer schmutzig sein wird. Mit anderen Worten, sobald der Anfangszustand geladen ist (über initialValues in mapStateToProps), wird this.props.dirty immer wahr zurückgegeben. Selbst der Versand einer reset führt nicht zu dirty=false.

Gibt es eine Möglichkeit, dies zu überwinden? Das Problem, das ich habe, ist, dass ich eine Warnung an den Benutzer anzeigen kann, dass sie ihre Änderungen aufgeben werden, ohne meine eigene onChange Überschreibung für jedes Eingabefeld implementieren zu müssen, und jetzt sind sie immer warnte vor verlassenen Änderungen.

Answer 1

Konnte mit dem in ReduxForm integrierten normalizer Framework keine Lösung finden. Stattdessen nahm ich this suggestion from the issues list und baute meine eigene Maske/Normalizer-Komponente, um die Werte anzupassen, bevor sie angezeigt werden, aber stellen Sie auch sicher, dass der Speicher die Rohwerte erhält. Dies hat auch den zusätzlichen Vorteil, lassen Sie mich Dinge wie Währung als Number intern aber als String (mit einem $ und Tausende Separatoren) in der UI zu tun. Hier ist der Code für den Fall, dass jemand etwas Ähnliches machen möchte:

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;