Wrapping von UI-Komponenten zur Verwendung mit Redux Form und Verwendung benutzerdefinierter onChange-Ereignisfunktionen

Question

Das folgende ist ein benutzerdefiniertes Dropdown-Menü, das ich mit Redux Form kompatibel machen und die benutzerdefinierte onChange-Funktion ausführen möchte (zB: eine Aktion versenden)

<Select 
    label='Team' 
    name='team' 
    options={teamOptions} 
    placeholder='Team' 
    onClick={this.handleTeamClick} 
/> 

In einem ersten Schritt erstellt die Hülle I wie folgt:

export const rfSelect = ({ input, options, meta, ...rest }) => (
    <Select {...input} onChange={(e,v) => input.onChange(v.value)} options={options} {...rest} /> 
) 

wo der Standard onChange() der Select-Komponente aufgerufen wird.

Die Wrapper-Komponente wird mit Redux Formular wie folgt verwendet:

<Field 
    component={rfSelect} 
    label='Team' 
    name='team' 
    options={teamOptions} 
    placeholder='Team' 
    onClick={this.handleTeamClick} 
/> 

Bisher ist alles gut. Das UI-Element zeigt den neuen ausgewählten Wert an, wenn ein neuer Wert aus dem Dropdown-Menü ausgewählt wird.

In Schritt 2 möchte ich ein benutzerdefiniertes onChange-Ereignis übergeben. Dies ist, wie es aussieht.

<Field 
    component={rfSelect} 
    label='Team' 
    name='team' 
    options={teamOptions} 
    placeholder='Team' 
    onClick={this.handleTeamClick} 
    onChange={this.handleTeamChange} 
/> 

handleTeamChange(e, sel) { 
    this.props.dispatch(bla.handleTeamChange(sel.value)) 
} 

export const rfSelect = ({ input, options, meta, ...rest }) => (
    <Select {...input} onChange={(e,v) => input.onChange(v.value)} options={options} {...rest} /> 
) 

Hier onChange der Standard durch die Gewohnheit ersetzt wurde, die ich in vergangen handleTeamChange heißt korrekt und die Aktion ausgelöst wird.

Übergeben Sie jedoch meine eigene onChange jetzt nicht mehr aktualisiert den ausgewählten Wert bei der Auswahl aus dem Dropdown. Mit anderen Worten, ich wähle ein Dropdown-Element, aber der Wert bleibt leer.

Bottomline: Ich bin entweder in der Lage zu haben, die UI-Komponente den ausgewählten Wert korrekt zu aktualisieren, oder führe mein benutzerdefiniertes onChange-Ereignis aus. Aber nicht beide.

Hier sind die Ideen, die ich von zu lösen, um dieses Problem denken konnte:

• in den benutzerdefinierten onChange Funktion, die Aktualisierung des ausgewählten Wertes manuell
• Pass in dem benutzerdefinierten onChange Funktion behandeln wie onChange2 statt onChange (was bedeutet, dass die Standardfunktion nicht überladen wird) und anschließend der Komponenten-Wrapper sowohl input.onChange (...) als auch onChange2 (...) aufrufen soll.

Obwohl beide diese Alternativen sind ziemlich hacky, und ich bin nicht besonders gern. Ich konnte sie auch noch nicht erfolgreich codieren, sie sind also nur Ideen.

Für die erste Option, Drucken e in der handleTeamChange Funktion zeigt über die folgenden, die ich versucht habe (und nicht) manuell Komponente auswählen Wert auf zu verwenden:

Jede Eingabe auf Dies würde sehr geschätzt werden.

Danke!

Answer 1

Erlauben benutzerdefinierten onChange Handler zu Field ist eine Funktion, die ich für eine zukünftige Version der Bibliothek in Betracht ziehen.

Sie sind mit Ihren Hackideen auf dem richtigen Weg.So etwas sollte funktionieren:

export const rfSelect = ({ input, meta, onChange, ...rest }) => (
    <Select {...input} onChange={(e,v) => { 
    input.onChange(v.value) // update redux-form value 
    onChange(v.value)  // call your additional listener 
    }} {...rest} /> 
) 

I entfernt options, weil sie es in ...rest, und Sie können sogar rufen Sie Ihren prop onChange, wie es von dem in input getrennt ist.

Hoffe, das hilft.