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

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

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

注：react@^15.4.2，react-redux @^5.0.2，redux-form @^6.4.3

ES6：CollectionForm.js

...
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 (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <Field component={renderTextInput} name="name" type="text" label="Name"/>
                <Field component={ColorSelect} name="color" />

                <div class="field-buttons right-align group">
                    <Button type="submit" disabled={submitting} primary>
                        Save
                    </Button>
                </div>
            </form>
        );
    }
};

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

12050

2018-01-23 15:08

起源

答案:

你可以使用react-redux mapDispatchToProps 与...一起 change 行动创造者为了达到你想要的目的：

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 <li key={color}><a onClick={() => selectColor(color)}></a></li>;
  }
}

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

2018-01-24 16:10

完善！非常感谢 - 做了一个魅力。 - Mike Priest

@gustavohenke请添加调度包装器 - zahar_g

它不需要： github.com/reactjs/react-redux/blob/master/docs/... - gustavohenke

答案: