2016-06-07 49 views
0

我在redux-form裏面有一個material-ui下拉菜單,我想初始化它的值。從材料狀態的初始值-ui減少形式的下拉

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

理想我: 我被派遣兩個動作得到兩個我想要的值[exercise.exercise_type_idexercise.exercise_type_name]和可用的選項[types,與idname等屬性的對象數組]列表想有地方類似:

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

但僅限於初始狀態,因爲我們希望與handleDropDownChange處理的變化。

[當然我希望是這樣

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

,但我知道這是一個反模式。但無論如何,這是行不通的,道具仍然是空]

我的下拉是這樣的:

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

更多代碼:

//... 

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); 

回答

1

啊,原來簡單超出我的預期。

這個固定我的問題:

DropDownMenu組件它的價值應該是這樣的:

value={dropDownValue || exercise_type_name.value}