redux-form 内に material-ui ドロップダウン メニューがあり、その値を初期化したいと考えています。2 つのアクションをディスパッチすることにより、必要な値 [exercise.exercise_type_id
およびexercise.exercise_type_name
] と使用可能なオプションのリスト [ 、およびプロパティtypes
を持つオブジェクトの配列など] の両方を取得しています。id
name
componentWillMount(){
this.props.actions.exercise.fetchInfo(this.props.params.exerciseId);
this.props.actions.exercise.fetchAllTypes();
};
理想的には、次のような場所が必要です。
_.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);