0

redux-form 内に material-ui ドロップダウン メニューがあり、その値を初期化したいと考えています。2 つのアクションをディスパッチすることにより、必要な値 [exercise.exercise_type_idおよびexercise.exercise_type_name] と使用可能なオプションのリスト [ 、およびプロパティtypesを持つオブジェクトの配列など] の両方を取得しています。idname

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

1 に答える 1