redux-form 中 material-ui 下拉列表的初始值答案

【问题标题】：initial values from state of material-ui dropdown in redux-formredux-form 中 material-ui 下拉列表的初始值
【发布时间】：2016-10-07 01:01:08
【问题描述】：

我在 redux-form 中有一个 material-ui 下拉菜单，我想初始化它的值。通过调度两个操作，我得到了我想要的值 [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}
};

但我知道这是一种反模式。不过不管怎样还是不行，props还是空的。]

我的下拉菜单是这样的：

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

【问题讨论】：

标签： reactjs drop-down-menu material-ui react-redux redux-form

【解决方案1】：

啊，结果比我预期的要简单。

这解决了我的问题：

在DropDownMenu 组件中，它的值应该是这样的：

value={dropDownValue || exercise_type_name.value}

【讨论】：