Migrating redux-form auf v6, onBlur und onChange Funktionen

Question

Ich migrating Redux-Form auf die neueste Version, 6.0.0rc3. In dieser Version ist das Array 'Felder' nicht mehr vorhanden und wird durch eine Feldkomponente ersetzt (siehe http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/). Ich benutzte die Standard onBlur Funktion in v5 wie folgt zu erweitern:

const { user_zipcode } = this.props.fields; 
onChange={ 
    val => user_zipcode.onChange(this._handleZipcodeChange(val)) 
} 

jedoch in der neuen Version kann dies nicht mehr geschehen, weil this.props.fields existiert nicht.

Von dem, was ich in der Dokumentation gefunden, sollte der neue Weg, um eine Komponente für jedes Formularfeld zu erstellen, die eine bestimmte Funktion hat, und erweitert die onBlur Funktion gibt:

_onBlur() { 
    // my custom blur-function 
} 

render() { 
    const { input, touched, error } = this.props; 
    return (
    <input 
     className={styles.input} 
     {...input} 
     onBlur={() => { 
     // 2 functions need to be called here 
     this._onBlur(); 
     input.onBlur(); 
     }} 
    /> 
); 
} 

Das ist in Ordnung, außer Ich muss für jedes Feld ein neues Element erstellen, das beim Auftreten des Blur-Ereignisses etwas anderes zu tun hat. In einigen Feldern muss ich eine API aufrufen, die ich durch eine Aktion absende. Zum Beispiel muss ich dies tun, um eine Adresse zu bekommen. In diesen Komponenten muss ich meinen Laden verbinden, damit er viele Male verbunden wird.

Ich versuchte, meine benutzerdefinierte Funktion aus dem übergeordneten an die Feldkomponente passieren, wie folgt aus:

<Field 
    type="text" 
    name="user_zipcode" 
    component={Zipcode} 
    onBlurFunction={this._myBlurFunction} 
/> 

und beide Funktionen immer von den Requisiten in meiner Komponente:

... 
onBlur={() => { 
    input.onBlurFunction(); 
    input.onBlur(); 
}} 
... 

Dieses didn‘ t arbeiten richtig wegen der neuen React warning.

Gibt es einen besseren Weg, dies zu tun?

Answer 1

Ich habe am Ende mit dem Erstellen einer benutzerdefinierten Komponente für jedes Formularfeld, das eine onChange oder onBlur-Funktion hat. Auf diese Weise können Sie beide Funktionen ausführen, so dass alle standardmäßigen redux-form-Aktionen aufgerufen werden.

// Licenceplate-component 

export default class Licenceplate extends Component { 

    _handleBlur = ({ currentTarget: { value } }) => { 
     // my blur function 
    } 

    render() { 
     const { 
      input, 
      meta: { touched, error } 
     } = this.props; 

     return (
      <div className={styles.wrapper}> 
      <input 
       {...input} 
       type="text" 
       onBlur={ 
       e => input.onBlur(this._handleBlur(e)) 
       } 
      /> 

     </div> 
     ); 
    } 
} 


// In my form-component 
<Field 
    component={Licenceplate} 
    name="car_licenceplate" 
    type="text" 
/> 

Answer 2

In der Dokumentation sagt, dass es dieser

Requisiten: Object [optional]

Objekt mit benutzerdefinierten Requisiten durch die Feldkomponente in eine Komponente zu Komponente Stütze vorgesehen passieren. Diese Requisiten werden mit Props verschmolzen, die von Field selbst bereitgestellt werden. Dies kann nützlich sein, wenn Sie TypeScript verwenden. Dieses Konstrukt ist vollständig optional; Die primäre Methode, Requisiten an Ihre Komponente weiterzuleiten, besteht darin, sie direkt der Feldkomponente zu übergeben. Wenn Sie diese aus irgendeinem Grund lieber zu einem separaten Objekt bündeln möchten, können Sie dies tun, indem Sie sie in Requisiten übergeben.

<Field component={renderField} props={{ disabled: true }} /> 

http://redux-form.com/6.0.0-rc.3/docs/api/Field.md/

Vielleicht, dass man ausprobieren. Es wird wahrscheinlich den Fehler verhindern. Oder ziehen Sie die Funktion prop, bevor sie an den Eingang übergeben wird.