Redux-Form来自外部交互的更新字段值

我有一个redux-form连接到我的应用程序状态,一切似乎都很好.我可以获取数据并将其加载到我的表单中,然后提交数据并获取我想要的元数据...

但是,我有一个自定义交互(颜色选择器),需要动态更改托管字段的值.我尝试的所有内容都会改变屏幕,但不会改变redux格式状态,即当我提交表单时,我只获取原始字段数据而不是表单中显示的新数据.

下面的版本是将字段props传递给组件并尝试使用ColorSelect组件状态作为字段值.我也试过创建一个动作创建者,但是同样的结果和更多的代码,这个例子......

注:react@^15.4.2,react-redux @^5.0.2,redux-form @^6.4.3

...
import ColorSelect from './ColorSelect';


class CollectionForm extends Component {

    /**
     * On form submit accepted
     * @param values
     */
    onSubmit(values){

        //See screenshot for evidence
        log('Updating collection:', 'warn', values);

        //values.color is grey and not yellow!
        this.props.dispatch(updateCollection(values));
        return;
    }

    /**
     * Form render
     * @return {JSX}
     */
    render()
    {
        const { handleSubmit, submitting } = this.props;

        return (
            

                
                

                

                    
                        Save
                    
                
            
        );
    }
};

//Redux form decorator
CollectionForm = reduxForm({ form: 'collectionForm' })(CollectionForm)

// State connector
CollectionForm = connect(
    state => ({
        initialValues: state.collections.activeCollection

    }), //MapStatetoProps
    {
        onLoad: fetchCollection
    }   //mapActionToProps
)(CollectionForm);

export default CollectionForm;

import React, { Component } from 'react'
import { Field, reduxForm, SubmissionError } from 'redux-form';

const colors = [
    'grey', 'green', 'yellow', 'orange', 'red', 'purple', 'blue'
];

export default class ColorSelect extends Component {

    constructor(props){
        super(props);

        this.state = {
            selectedColor : this.props.input.value //Set to current  input value
        };

        this.onSelect = this.onSelect.bind(this);
        this.renderColor = this.renderColor.bind(this);
    }

    /**
     * Color picker selected
     * @param color
     */
    onSelect(color){
        this.setState({ selectedColor: color }); //Sets correct state here
    }

    /**
     * Render a color list item
     * @param color
     * @return {JSX}
     */
    renderColor(color){

        const select = this.state.selectedColor === color ? "active" : "";
        const klass = color + " " + select;

        return 

             this.onSelect(color)}>
        
    }

    /**
     * Render color list action
     * @return {JSX}
     */
    render(){

        //Override field value with colorSelected state
        
        return (
            

                

                

                    

                        {colors.map((color) => this.renderColor(color) )}
                    
                
            
        );
    }
}

import { Component } from "react";
import { connect } from "react-redux';
import { change } from "redux-form";

class ColorSelect extends Component {
  // ...other stuff in this class...

  renderColor (color) {
    const { selectColor } = this.props;
    return 
 selectColor(color)}>
;
  }
}

export default connect(null, {
  selectColor: color => change( "yourFormName", "yourFieldName", color )
})(ColorSelect)