0

Ich habe ein Material-ui Dropdown-Menü innerhalb einer Redux-Form, und ich möchte seinen Wert initialisieren. Ich erhalte beide den Wert, den ich will [exercise.exercise_type_id und exercise.exercise_type_name] und die Liste der verfügbaren Optionen [types, Array von Objekten mit id und name Eigenschaften, unter anderem] durch Dispatching zwei Aktionen:Anfangswerte vom Zustand des Materials-ui Dropdown in Redux-Form

componentWillMount(){ 
    this.props.actions.exercise.fetchInfo(this.props.params.exerciseId); 
    this.props.actions.exercise.fetchAllTypes(); 
}; 

Ideale I möchte wie irgendwo etwas haben:

_.map(this.props.types, (type) =>{ 
      if (type.id == this.props.exercise.exercise_type_id){ 
       this.setState({ 
        dropDownValue: type.name 
       }); 
      } 
     }); 

aber nur für den Anfangszustand, da wir Änderungen mit handleDropDownChange behandeln möchten.

[Natürlich würde ich so etwas wie

state = { 
    dropDownValue: {this.props.exercise.exercise_type_name} 
}; 

schätzen, aber ich weiß, das ist ein Anti-Muster. Aber trotzdem ist es nicht funktioniert, Requisiten noch leer sind]

My Drop-Down ist wie folgt:.

<DropDownMenu {...exercise_type_name} //does nothing 
     value={dropDownValue} 
     onChange={onDropDownChange}> 
    {_.map(types, (type) => { 
     return <MenuItem key={type.id} value={type.name} primaryText={type.name}/>; 
    })} 

Weitere Code:

//... 

state = { 
     dropDownValue: '' 
    }; 

//... 

handleDropDownChange = (event, index, value) => { 
     this.setState({ 
      dropDownValue: value 
     }); 
    }; 

//... 

    function mapStateToProps(state){ 
    return { 
     exercise: getExerciseInfo(state), 
     initialValues: getExerciseInfo(state), 
     request: getExRequest(state), 
     types: getExTypes(state) 
    }; 
} 

//.... 

export default reduxForm({ 
    form: 'EditExerciseForm', 
    fields: ['exercise_type_name', 'max_errors_percentage', 'min_speed'] 
}, mapStateToProps, mapDispatchToProps)(ExerciseEdit); 

Antwort

1

Ah, einfacher stellte sich heraus, als was ich erwartet hatte.

Diese feste mein Problem:

Im DropDownMenu Komponente sollte sein Wert sein wie:

value={dropDownValue || exercise_type_name.value}