versenden eine benutzerdefinierte Aktion auf redux-Form, wenn onChange eine benutzerdefinierte Komponente

Question

Gegeben wählen:

export const RenderDropDown = (props) => { 
    const {values, input, label, type, meta: {touched, error, active}} = props; 

    var options = function (value, index) { 
     return <Option key={index} 
         value={value} /> 
    }; 

    return(
     <div> 
     <select {...input}> 
      <option value="">--- Select a nationality ---</option> 
      {values.map(options)} 
     </select> 
     </div> 
    ) 
} 

Eingehüllt in eine Redux-Form Feldkomponente

<Field name="nationality" component={RenderDropDown} values={props.nationalities}/> 

Ich möchte, dass, wenn select Feuer "onChange" Ereignis, eine benutzerdefinierte Aktion wird neben der Aktion Redux-Formular ausgelöst (AKA @@ redux-form/change)

Wie kann ich das erreichen?

Ich habe versucht, durch Requisiten die Funktion zu übergeben und einen OnChange-Handler auf <select> Tag setzen, aber dies überschreibt die Redux-Form onChange.

Jede Hilfe wird geschätzt!

Answer 1

Sie müssen das Redux-Formular onChange manuell in Ihrem eigenen benutzerdefinierten onChange aufrufen, um den redux-form-Wert zu aktualisieren. Wie so:

const { onChange, ... } = props; 
... 
<select onChange={(e) => { 
    const val = e.target.value 
    // whatever stuff you want to do 
    onChange(val) 
}} />